@heymantle/litho 0.0.10 → 0.0.12

package/dist/cjs/components/Pane.js

@@ -3,21 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get PaneContext () {
+        return PaneContext;
+    },
+    get default () {
         return _default;
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _polarisicons = require("@shopify/polaris-icons");
 var _tailwindvariants = require("tailwind-variants");
-var _react = require("react");
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
 var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
 var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList"));
+var _TabNavigation = /*#__PURE__*/ _interop_require_default(require("./TabNavigation"));
 var _Frame = require("./Frame");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _usePaneState = require("../utilities/usePaneState");
+var _useMobile = require("../utilities/useMobile");
+var _useBodyScrollLock = require("../utilities/useBodyScrollLock");
+var _useKeyboardAction = require("../utilities/useKeyboardAction");
+var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -31,6 +46,47 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -69,27 +125,489 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
+// Reference counter for pane open state (shared across all Pane components)
+var paneOpenCount = 0;
+var MIN_PANE_WIDTH = 360;
+var MAX_PANE_WIDTH = 800;
+var COLLAPSED_WIDTH = 28;
+var MOBILE_BREAKPOINT = 768;
+var ZERO_WIDTH = '0px';
+var COLLAPSED_WIDTH_STR = "".concat(COLLAPSED_WIDTH, "px");
+var calculatePaneWidth = function(open, isMobile, isCollapsed, paneWidth) {
+    // Early returns for common cases (ordered by frequency/likelihood)
+    if (!open) return ZERO_WIDTH;
+    if (isCollapsed) return COLLAPSED_WIDTH_STR;
+    if (isMobile) return ZERO_WIDTH; // Full screen on mobile when expanded
+    // Only format paneWidth when actually needed
+    return "".concat(paneWidth, "px");
+};
 var styles = (0, _tailwindvariants.tv)({
-    base: "Litho-Pane hidden md:block fixed inset-0 w-full md:left-auto md:max-w-[var(--litho-pane-width)] block bg-surface-lowest shadow-pane-inner pointer-events-auto"
+    base: "Litho-Pane fixed right-0 w-full md:w-[var(--litho-pane-width)] bg-surface-lowest shadow-pane-inner pointer-events-auto transition-all duration-200",
+    variants: {
+        collapsed: {
+            true: "md:w-7 md:h-screen md:flex-shrink-0"
+        },
+        isMobile: {
+            true: "top-0 bottom-0",
+            false: "top-0 h-full"
+        }
+    },
+    defaultVariants: {
+        isMobile: false
+    }
 });
 var innerStyles = (0, _tailwindvariants.tv)({
-    base: "relative flex flex-col overflow-y-auto h-full"
+    base: "relative flex flex-col h-full",
+    variants: {
+        collapsed: {
+            true: "bg-surface-lowest cursor-pointer overflow-visible",
+            false: "overflow-hidden"
+        }
+    }
+});
+// Content styles will be applied inline with dynamic width
+var getContentStyles = function(collapsed, width) {
+    return {
+        width: width,
+        transition: 'opacity 200ms ease-in-out',
+        pointerEvents: collapsed ? 'none' : 'auto',
+        opacity: collapsed ? 0 : 1
+    };
+};
+var resizeHandleStyles = (0, _tailwindvariants.tv)({
+    base: "absolute top-0 left-0 w-1 h-full transition-colors duration-300 hover-delay hover:bg-tint-3 cursor-col-resize z-10",
+    variants: {
+        resizing: {
+            true: "bg-tint-3"
+        }
+    }
 });
-var dragHandleStyles = (0, _tailwindvariants.tv)({
-    base: "cursor-col-resize absolute top-0 left-0 w-1 h-full transition-colors duration-300 hover-delay hover:bg-tint-3"
+var collapseHandleStyles = (0, _tailwindvariants.tv)({
+    base: "group/collapse-handle bg-surface-normal w-5 hover:w-6 h-10 flex-shrink-0 flex items-center justify-center cursor-pointer transition-all duration-200 ease-in-out rounded-r-sm",
+    variants: {
+        variant: {
+            expanded: "",
+            collapsed: "hover:bg-surface-lower"
+        }
+    },
+    defaultVariants: {
+        variant: "expanded"
+    }
 });
 var PaneContext = /*#__PURE__*/ (0, _react.createContext)({});
+// Collapse button component to reduce duplication
+function CollapseButton(param) {
+    var variant = param.variant, icon = param.icon, label = param.label, onClick = param.onClick, onKeyDown = param.onKeyDown, _param_stopPropagation = param.stopPropagation, stopPropagation = _param_stopPropagation === void 0 ? false : _param_stopPropagation;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: "absolute left-0 top-1/2 -translate-y-1/2",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+            content: label,
+            preferredPosition: "above",
+            alignment: "right",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: collapseHandleStyles({
+                    variant: variant
+                }),
+                onClick: function(e) {
+                    if (stopPropagation) e.stopPropagation();
+                    onClick(e);
+                },
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: onKeyDown,
+                "aria-label": label,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                    source: icon,
+                    color: "subdued"
+                })
+            })
+        })
+    });
+}
 function Pane() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var open = props.open, onClose = props.onClose, children = props.children;
+    var _tabStorage_tabs;
+    var open = props.open, onClose = props.onClose, onOpen = props.onOpen, children = props.children, tabStorage = props.tabStorage, onTabRemove = props.onTabRemove, onExpandRef = props.onExpandRef, // Generic tab configuration
+    tabId = props.tabId, tabTitle = props.tabTitle, tabKey = props.tabKey, orgId = props.orgId;
     var setPaneIsOpen = (0, _Frame.useFrame)().setPaneIsOpen;
-    var classes = styles();
+    var paneRef = (0, _react.useRef)(null);
+    var resizeHandleRef = (0, _react.useRef)(null);
+    var paneWidthRef = (0, _react.useRef)(null);
+    var resizeHandlersRef = (0, _react.useRef)({
+        mouseMove: null,
+        mouseUp: null
+    });
+    var isMountedRef = (0, _react.useRef)(true);
+    var hasRegisteredRef = (0, _react.useRef)(false);
+    var previousTabCountRef = (0, _react.useRef)(0);
+    var _useState = _sliced_to_array((0, _react.useState)(false), 2), isTransitioning = _useState[0], setIsTransitioning = _useState[1];
+    var isPastInitialMountRef = (0, _react.useRef)(false);
+    var previousOpenPropRef = (0, _react.useRef)(open);
+    // Get orgId from prop or tabStorage (tabStorage always has orgId set, either passed or 'default')
+    var currentOrgId = orgId || (tabStorage === null || tabStorage === void 0 ? void 0 : tabStorage.orgId);
+    // Use consolidated pane state hook with orgId
+    var _usePaneState1 = (0, _usePaneState.usePaneState)(currentOrgId), paneState = _usePaneState1.state, setPaneWidth = _usePaneState1.setWidth, setIsCollapsed = _usePaneState1.setCollapsed, setPaneOpen = _usePaneState1.setOpen, refreshFromStorage = _usePaneState1.refreshFromStorage;
+    var isCollapsed = paneState.collapsed;
+    var paneWidth = paneState.width;
+    // Helper to open the pane (updates localStorage and notifies parent)
+    var openPane = (0, _react.useCallback)(function() {
+        setPaneOpen(true);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    }, [
+        setPaneOpen,
+        onOpen
+    ]);
+    // Helper to close the pane (updates localStorage and resets collapsed state)
+    var closePane = (0, _react.useCallback)(function() {
+        setPaneOpen(false);
+        setIsCollapsed(false);
+    }, [
+        setPaneOpen,
+        setIsCollapsed
+    ]);
+    // Helper to close pane and notify parent (consolidates common pattern)
+    var closePaneAndNotify = (0, _react.useCallback)(function() {
+        closePane();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [
+        closePane,
+        onClose
+    ]);
+    // Read from localStorage when pane opens (user action, not page load)
+    (0, _react.useEffect)(function() {
+        if (open && refreshFromStorage && currentOrgId) {
+            refreshFromStorage();
+        }
+    }, [
+        open,
+        refreshFromStorage,
+        currentOrgId
+    ]);
+    // Update pane open state in localStorage when open prop changes
+    // The setPaneOpen setter will handle first-time state creation automatically
+    (0, _react.useEffect)(function() {
+        if (!currentOrgId) return;
+        // Only update if open prop actually changed (not on every render)
+        if (previousOpenPropRef.current === open) return;
+        previousOpenPropRef.current = open;
+        if (open) {
+            // Set open to true when pane opens (creates state if it doesn't exist)
+            setPaneOpen(true);
+        } else {
+            // Set open to false when pane closes, and reset collapsed state
+            closePane();
+        }
+    }, [
+        open,
+        currentOrgId,
+        setPaneOpen,
+        closePane
+    ]);
+    var _useState1 = _sliced_to_array((0, _react.useState)(false), 2), isResizing = _useState1[0], setIsResizing = _useState1[1];
+    // Use mobile detection hook
+    var isMobile = (0, _useMobile.useMobile)(MOBILE_BREAKPOINT);
+    // Keep ref in sync with state
+    (0, _react.useEffect)(function() {
+        paneWidthRef.current = paneWidth;
+    }, [
+        paneWidth
+    ]);
+    // Get the active tab data
+    var activeTab = (0, _react.useMemo)(function() {
+        if (!(tabStorage === null || tabStorage === void 0 ? void 0 : tabStorage.activeTabId)) return null;
+        return tabStorage.tabs.find(function(tab) {
+            return tab.id === tabStorage.activeTabId;
+        }) || null;
+    }, [
+        tabStorage === null || tabStorage === void 0 ? void 0 : tabStorage.tabs,
+        tabStorage === null || tabStorage === void 0 ? void 0 : tabStorage.activeTabId
+    ]);
+    // Handle tab creation, activation, and ensure active tab exists when pane opens
+    (0, _react.useEffect)(function() {
+        if (!open || !tabStorage) return;
+        // If tabId and tabTitle are provided, create/update/activate that tab
+        if (tabId && tabTitle) {
+            var existingTab = tabStorage.tabs.find(function(tab) {
+                return tab.id === tabId;
+            });
+            var wasAlreadyActive = existingTab && tabStorage.activeTabId === tabId;
+            if (existingTab) {
+                // Tab exists - switch to it if not already active
+                if (!wasAlreadyActive) {
+                    tabStorage.setActiveTab(tabId);
+                }
+                // Update title/key if changed
+                if (existingTab.title !== tabTitle) {
+                    tabStorage.updateTab(tabId, {
+                        title: tabTitle
+                    });
+                }
+                if (tabKey !== undefined && existingTab.key !== tabKey) {
+                    tabStorage.updateTab(tabId, {
+                        key: tabKey
+                    });
+                }
+            } else {
+                // Create new tab
+                tabStorage.addTab({
+                    id: tabId,
+                    title: tabTitle,
+                    key: tabKey
+                });
+            }
+        }
+        // Ensure an active tab is set (fallback if tabId/tabTitle not provided or if active tab doesn't exist)
+        if (tabStorage.tabs.length > 0) {
+            var activeTabExists = tabStorage.activeTabId && tabStorage.tabs.some(function(tab) {
+                return tab.id === tabStorage.activeTabId;
+            });
+            if (!activeTabExists) {
+                var firstTab = tabStorage.tabs[0];
+                if (firstTab) {
+                    tabStorage.setActiveTab(firstTab.id);
+                }
+            }
+        }
+    }, [
+        open,
+        tabStorage,
+        tabId,
+        tabTitle,
+        tabKey
+    ]);
+    // Auto-open pane when tabs are added (user action, not page load)
+    (0, _react.useEffect)(function() {
+        var _tabStorage_tabs;
+        if (!tabStorage || !currentOrgId) {
+            previousTabCountRef.current = 0;
+            return;
+        }
+        var currentTabCount = ((_tabStorage_tabs = tabStorage.tabs) === null || _tabStorage_tabs === void 0 ? void 0 : _tabStorage_tabs.length) || 0;
+        var previousTabCount = previousTabCountRef.current;
+        // Skip on initial mount - only react to tab count changes after mount
+        if (!isPastInitialMountRef.current) {
+            previousTabCountRef.current = currentTabCount;
+            isPastInitialMountRef.current = true;
+            return;
+        }
+        // If tab count increased (user added a tab) and pane is closed, open it
+        if (currentTabCount > previousTabCount && !open) {
+            openPane();
+        }
+        previousTabCountRef.current = currentTabCount;
+    }, [
+        tabStorage === null || tabStorage === void 0 ? void 0 : (_tabStorage_tabs = tabStorage.tabs) === null || _tabStorage_tabs === void 0 ? void 0 : _tabStorage_tabs.length,
+        currentOrgId,
+        open,
+        openPane
+    ]);
+    // Update frame context when pane opens/closes
+    // Uses reference counting to coordinate between multiple Pane components
+    (0, _react.useEffect)(function() {
+        if (open && !hasRegisteredRef.current) {
+            paneOpenCount++;
+            if (paneOpenCount === 1) {
+                setPaneIsOpen(true);
+            }
+            hasRegisteredRef.current = true;
+        } else if (!open && hasRegisteredRef.current) {
+            paneOpenCount = Math.max(0, paneOpenCount - 1);
+            if (paneOpenCount === 0) {
+                setPaneIsOpen(false);
+            }
+            hasRegisteredRef.current = false;
+        }
+        return function() {
+            if (hasRegisteredRef.current) {
+                paneOpenCount = Math.max(0, paneOpenCount - 1);
+                if (paneOpenCount === 0) {
+                    setPaneIsOpen(false);
+                }
+                hasRegisteredRef.current = false;
+            }
+        };
+    }, [
+        open,
+        setPaneIsOpen
+    ]);
+    // Uses shared utility with reference counting to coordinate with other components
+    (0, _useBodyScrollLock.useBodyScrollLock)(open && isMobile && !isCollapsed);
+    // Memoize calculated width to avoid unnecessary recalculations
+    var calculatedWidth = (0, _react.useMemo)(function() {
+        return calculatePaneWidth(open, isMobile, isCollapsed, paneWidth);
+    }, [
+        open,
+        isMobile,
+        isCollapsed,
+        paneWidth
+    ]);
+    // Calculate content width - keep width at paneWidth when collapsed so translateX works
+    var contentWidth = (0, _react.useMemo)(function() {
+        if (!open) return '0px';
+        // On mobile, use full width when expanded; on desktop, use paneWidth
+        // Keep width at paneWidth even when collapsed so translateX(100%) can slide it off-screen
+        if (isMobile) return '100%';
+        return "".concat(paneWidth, "px");
+    }, [
+        open,
+        isMobile,
+        paneWidth
+    ]);
+    // Update CSS variable for pane width
+    (0, _react.useEffect)(function() {
+        document.documentElement.style.setProperty('--litho-pane-width', calculatedWidth);
+    }, [
+        calculatedWidth
+    ]);
+    // Cleanup resize handlers on unmount
+    (0, _react.useEffect)(function() {
+        isMountedRef.current = true;
+        return function() {
+            isMountedRef.current = false;
+            // Clean up any active resize handlers if component unmounts during drag
+            var _resizeHandlersRef_current = resizeHandlersRef.current, mouseMove = _resizeHandlersRef_current.mouseMove, mouseUp = _resizeHandlersRef_current.mouseUp;
+            if (mouseMove) {
+                document.removeEventListener('mousemove', mouseMove);
+            }
+            if (mouseUp) {
+                document.removeEventListener('mouseup', mouseUp);
+            }
+            resizeHandlersRef.current = {
+                mouseMove: null,
+                mouseUp: null
+            };
+        };
+    }, []);
+    // Handle resize drag with improved performance
+    // Updates CSS variable directly during drag for smooth performance
+    var handleResizeStart = (0, _react.useCallback)(function(e) {
+        e.preventDefault();
+        if (!isMountedRef.current) return;
+        setIsResizing(true);
+        var startX = e.clientX;
+        // Use ref to get current width to avoid stale closure
+        var startWidth = paneWidthRef.current || paneWidth;
+        var currentWidth = startWidth;
+        // Disable transitions during drag for immediate response
+        var paneElement = paneRef.current;
+        var originalTransition = paneElement === null || paneElement === void 0 ? void 0 : paneElement.style.transition;
+        if (paneElement) {
+            paneElement.style.transition = 'none';
+        }
+        var handleMouseMove = function(e) {
+            // Check if component is still mounted before updating
+            if (!isMountedRef.current) return;
+            // Calculate new width directly without RAF for immediate response
+            var diff = startX - e.clientX; // Inverted because we're dragging from the left edge
+            var newWidth = Math.max(MIN_PANE_WIDTH, Math.min(MAX_PANE_WIDTH, startWidth + diff));
+            currentWidth = newWidth;
+            // Update CSS variable directly for immediate visual feedback (no re-render)
+            document.documentElement.style.setProperty('--litho-pane-width', "".concat(newWidth, "px"));
+        };
+        var handleMouseUp = function() {
+            // Check if component is still mounted before updating state
+            if (!isMountedRef.current) {
+                // Clean up listeners even if unmounted
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+                resizeHandlersRef.current = {
+                    mouseMove: null,
+                    mouseUp: null
+                };
+                return;
+            }
+            // Restore transitions
+            if (paneElement) {
+                paneElement.style.transition = originalTransition || '';
+            }
+            // Sync final width to state (triggers re-render and localStorage save)
+            setPaneWidth(currentWidth);
+            setIsResizing(false);
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            resizeHandlersRef.current = {
+                mouseMove: null,
+                mouseUp: null
+            };
+        };
+        // Store handlers in ref for cleanup
+        resizeHandlersRef.current = {
+            mouseMove: handleMouseMove,
+            mouseUp: handleMouseUp
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }, [
+        paneWidth,
+        setPaneWidth,
+        setIsResizing
+    ]);
+    var toggleCollapsed = (0, _react.useCallback)(function() {
+        setIsCollapsed(function(prev) {
+            var newValue = !prev;
+            // Track transition start to prevent hover flash
+            setIsTransitioning(true);
+            // Clear transition flag after animation completes
+            setTimeout(function() {
+                setIsTransitioning(false);
+            }, 200); // Match transition duration
+            return newValue;
+        });
+    }, [
+        setIsCollapsed
+    ]);
+    // Expand pane function - exposed to parent via ref and tabStorage
+    var expandPane = (0, _react.useCallback)(function() {
+        setIsCollapsed(false);
+    }, [
+        setIsCollapsed
+    ]);
+    // Expose expand function to parent via ref and tabStorage
+    (0, _react.useEffect)(function() {
+        // Expose to parent ref if provided
+        if (onExpandRef) {
+            onExpandRef.current = expandPane;
+        }
+        // Expose to tabStorage for hooks to use
+        if (tabStorage) {
+            if (!tabStorage.expandPaneRef) {
+                tabStorage.expandPaneRef = {
+                    current: null
+                };
+            }
+            tabStorage.expandPaneRef.current = expandPane;
+        }
+        // Cleanup: clear refs when component unmounts or refs change
+        return function() {
+            if (onExpandRef) {
+                onExpandRef.current = null;
+            }
+            if (tabStorage === null || tabStorage === void 0 ? void 0 : tabStorage.expandPaneRef) {
+                tabStorage.expandPaneRef.current = null;
+            }
+        };
+    }, [
+        onExpandRef,
+        tabStorage,
+        expandPane
+    ]);
+    // Expose isCollapsed synchronously using useLayoutEffect (runs before paint)
+    (0, _react.useLayoutEffect)(function() {
+        if (tabStorage) {
+            tabStorage.isCollapsed = isCollapsed;
+        }
+    }, [
+        tabStorage,
+        isCollapsed
+    ]);
+    // Handle keyboard interactions
+    var handleKeyboardAction = (0, _useKeyboardAction.useKeyboardAction)();
+    // Handle Escape key to close
     (0, _react.useEffect)(function() {
-        setPaneIsOpen(open);
         if (!open || !onClose) return;
         var handleKeyDown = function(event) {
             if (event.key === "Escape") {
-                onClose();
+                closePaneAndNotify();
             }
         };
         document.addEventListener("keydown", handleKeyDown);
@@ -98,36 +616,121 @@ function Pane() {
         };
     }, [
         open,
-        onClose
+        onClose,
+        closePaneAndNotify
+    ]);
+    var handleTabClick = (0, _react.useCallback)(function(tabId) {
+        if (!tabStorage) return;
+        tabStorage.setActiveTab(tabId);
+    // Don't expand when clicking tabs - collapsed state should not be changed
+    }, [
+        tabStorage
     ]);
+    var handleTabClose = (0, _react.useCallback)(function(tabId) {
+        if (!tabStorage) return;
+        var tabToRemove = tabStorage.tabs.find(function(tab) {
+            return tab.id === tabId;
+        });
+        var remainingTabsCount = tabStorage.tabs.length - 1;
+        // Remove the tab first
+        tabStorage.removeTab(tabId);
+        // Only close the pane if this was the last tab
+        if (remainingTabsCount === 0 && open && onClose) {
+            closePaneAndNotify();
+        }
+        // Notify parent about the removed tab
+        if (onTabRemove) {
+            onTabRemove(tabId, tabToRemove);
+        }
+    }, [
+        tabStorage,
+        open,
+        onClose,
+        onTabRemove,
+        closePane
+    ]);
+    // Memoize style object to avoid recreating on every render
+    // Must be called before early return to maintain hook order
+    var paneStyle = (0, _react.useMemo)(function() {
+        return isCollapsed ? {
+            width: "".concat(COLLAPSED_WIDTH, "px")
+        } : undefined;
+    }, [
+        isCollapsed
+    ]);
+    var classes = styles({
+        collapsed: isCollapsed,
+        isMobile: isMobile
+    });
+    var innerClasses = innerStyles({
+        collapsed: isCollapsed
+    });
     if (!open) {
         return null;
     }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(PaneContext.Provider, {
         value: {
-            onClose: onClose
+            activeTab: activeTab,
+            onClose: onClose,
+            isCollapsed: isCollapsed,
+            toggleCollapsed: toggleCollapsed
         },
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            ref: paneRef,
             className: classes,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: innerStyles(),
-                children: children
+            style: paneStyle,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "".concat(innerClasses, " ").concat(isCollapsed && !isTransitioning ? 'hover:bg-[#D5D3D1]' : ''),
+                onClick: isCollapsed ? toggleCollapsed : undefined,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "flex flex-col overflow-y-auto overflow-x-hidden h-full",
+                        style: getContentStyles(isCollapsed, contentWidth),
+                        children: [
+                            tabStorage && tabStorage.tabs.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TabNavigation.default, {
+                                tabs: tabStorage.tabs,
+                                activeTabId: tabStorage.activeTabId,
+                                onTabClick: handleTabClick,
+                                onTabClose: handleTabClose
+                            }),
+                            children,
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                ref: resizeHandleRef,
+                                className: resizeHandleStyles({
+                                    resizing: isResizing
+                                }),
+                                onMouseDown: handleResizeStart
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(CollapseButton, {
+                                variant: "expanded",
+                                icon: _polarisicons.ChevronRightMinor,
+                                label: "Collapse pane",
+                                onClick: toggleCollapsed,
+                                onKeyDown: function(e) {
+                                    return handleKeyboardAction(e, toggleCollapsed);
+                                }
+                            })
+                        ]
+                    }),
+                    isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsx)(CollapseButton, {
+                        variant: "collapsed",
+                        icon: _polarisicons.ChevronLeftMinor,
+                        label: "Expand pane",
+                        onClick: toggleCollapsed,
+                        onKeyDown: function(e) {
+                            return handleKeyboardAction(e, toggleCollapsed);
+                        },
+                        stopPropagation: true
+                    })
+                ]
             })
         })
     });
 }
 function Header() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var title = props.title, subtitle = props.subtitle, _props_actions = props.actions, actions = _props_actions === void 0 ? [] : _props_actions, _props_showCloseButton = props.showCloseButton, showCloseButton = _props_showCloseButton === void 0 ? true : _props_showCloseButton, _props_bottomBorder = props.bottomBorder, bottomBorder = _props_bottomBorder === void 0 ? true : _props_bottomBorder, subHeader = props.subHeader, tmp = props.backAction, _backAction = tmp === void 0 ? null : tmp, _props_expanded = props.expanded, expanded = _props_expanded === void 0 ? false : _props_expanded, _props_onToggleExpand = props.onToggleExpand, onToggleExpand = _props_onToggleExpand === void 0 ? function() {} : _props_onToggleExpand, _props_allowExpand = props.allowExpand, allowExpand = _props_allowExpand === void 0 ? true : _props_allowExpand;
-    var onClose = (0, _react.useContext)(PaneContext).onClose;
-    var showActionsOrClose = actions.length > 0 || showCloseButton;
+    var title = props.title, subtitle = props.subtitle, _props_actions = props.actions, actions = _props_actions === void 0 ? [] : _props_actions, _props_bottomBorder = props.bottomBorder, bottomBorder = _props_bottomBorder === void 0 ? true : _props_bottomBorder, subHeader = props.subHeader, tmp = props.backAction, _backAction = tmp === void 0 ? null : tmp;
     var _useState = _sliced_to_array((0, _react.useState)(null), 2), showActionsPopover = _useState[0], setShowActionsPopover = _useState[1];
-    (0, _react.useEffect)(function() {
-        var width = expanded ? 'var(--litho-pane-width-expanded)' : 'var(--litho-pane-width-default)';
-        document.documentElement.style.setProperty('--litho-pane-width', width);
-    }, [
-        expanded
-    ]);
     var backAction = _backAction ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: "Litho-Page__Header--BackAction",
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
@@ -143,10 +746,10 @@ function Header() {
         className: "Litho-Pane__Header",
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: "flex items-center justify-between gap-2 min-h-14 px-2 border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
+                className: "flex items-center justify-between px-2 border-edge-subdued min-h-14 ".concat(bottomBorder ? "border-b" : ""),
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                        className: "flex items-center gap-2 flex-1",
+                        className: "flex items-center gap-2",
                         children: [
                             backAction,
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
@@ -168,62 +771,43 @@ function Header() {
                             })
                         ]
                     }),
-                    showActionsOrClose && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: "flex items-center justify-end",
-                        children: [
-                            actions.map(function(action, index) {
-                                var showPopover = action.subActions || action.subSections;
-                                var innerContent = /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
-                                    plain: !action.destructive,
-                                    onClick: showPopover ? function() {
-                                        return setShowActionsPopover(index);
-                                    } : action.onAction || action.onClick,
-                                    disabled: action.disabled,
-                                    icon: action.icon,
-                                    loading: action.loading,
-                                    external: action.external,
-                                    url: action.url,
-                                    destructive: action.destructive,
-                                    tooltip: action.tooltip && showActionsPopover !== index ? action.tooltip : undefined,
-                                    tooltipPosition: "below"
-                                }, index);
-                                if (showPopover) {
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
-                                        active: showActionsPopover === index,
-                                        onClose: function() {
-                                            return setShowActionsPopover(null);
-                                        },
-                                        activator: innerContent,
-                                        preferredAlignment: "left",
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionList.default, {
-                                            sections: action.subSections,
-                                            items: action.subActions,
-                                            onActionAnyItem: function() {
-                                                return setShowActionsPopover(null);
-                                            }
-                                        })
-                                    });
-                                }
-                                return innerContent;
-                            }),
-                            allowExpand && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                                className: "hidden xl:block",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
-                                    plain: true,
-                                    icon: expanded ? _polarisicons.MinimizeMajor : _polarisicons.MaximizeMajor,
-                                    onClick: onToggleExpand,
-                                    tooltip: expanded ? "Minimize" : "Expand",
-                                    tooltipPosition: "below"
-                                })
-                            }),
-                            showCloseButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
-                                plain: true,
-                                icon: _polarisicons.CancelMajor,
-                                onClick: onClose,
-                                tooltip: "Close",
+                        children: actions.length > 0 && actions.map(function(action, index) {
+                            var showPopover = action.subActions || action.subSections;
+                            var innerContent = /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                plain: !action.destructive,
+                                onClick: showPopover ? function() {
+                                    return setShowActionsPopover(index);
+                                } : action.onAction || action.onClick,
+                                disabled: action.disabled,
+                                icon: action.icon,
+                                loading: action.loading,
+                                external: action.external,
+                                url: action.url,
+                                destructive: action.destructive,
+                                tooltip: action.tooltip && showActionsPopover !== index ? action.tooltip : undefined,
                                 tooltipPosition: "below"
-                            })
-                        ]
+                            }, index);
+                            if (showPopover) {
+                                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
+                                    active: showActionsPopover === index,
+                                    onClose: function() {
+                                        return setShowActionsPopover(null);
+                                    },
+                                    activator: innerContent,
+                                    preferredAlignment: "left",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionList.default, {
+                                        sections: action.subSections,
+                                        items: action.subActions,
+                                        onActionAnyItem: function() {
+                                            return setShowActionsPopover(null);
+                                        }
+                                    })
+                                });
+                            }
+                            return innerContent;
+                        })
                     })
                 ]
             }),
@@ -239,7 +823,7 @@ function Content() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var children = props.children, _props_padded = props.padded, padded = _props_padded === void 0 ? true : _props_padded, className = props.className;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        className: "Litho-Pane__Content flex-1 overflow-auto ".concat(padded ? "p-2" : "", " ").concat(className),
+        className: "Litho-Pane__Content flex-1 overflow-auto ".concat(padded ? "p-2" : "", " ").concat(className || ""),
         children: children
     });
 }
@@ -247,8 +831,9 @@ Pane.Content = Content;
 function Footer() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var children = props.children, _props_topBorder = props.topBorder, topBorder = _props_topBorder === void 0 ? true : _props_topBorder;
+    var isMobile = (0, _useMobile.useMobile)(MOBILE_BREAKPOINT);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        className: "Litho-Pane__Footer min-h-12 ".concat(topBorder ? "border-t border-edge-subdued" : ""),
+        className: "Litho-Pane__Footer min-h-12 ".concat(topBorder ? "border-t border-edge-subdued" : "", " ").concat(isMobile ? "sticky bottom-0 bg-surface-lowest z-10" : ""),
         children: children
     });
 }