@kawaiininja/layouts 2.0.0 → 3.0.0

package/dist/MobileLayout.js

@@ -1,139 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "framer-motion";
-import { Loader2, LogOut, Menu, Moon, Sun } from "lucide-react";
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
-import { ThemeProvider, useTheme } from "./ThemeContext";
-// --- Sub-components (Generic Versions) ---
-const RailNavIndicator = ({ height, offset, }) => (_jsx("div", { className: "absolute left-2 right-2 rounded-[24px] bg-[rgb(var(--bg-elevated))] transition-all duration-300 ease-out z-0 pointer-events-none border border-[rgb(var(--color-border-subtle))]/30", style: { height: `${height}px`, transform: `translateY(${offset}px)` } }));
-const RailNavButton = ({ title, icon: Icon, active, onClick, onRegisterRef, onTouchStart, onTouchMove, onTouchEnd, }) => (_jsxs("button", { ref: onRegisterRef, type: "button", role: "tab", "aria-label": title, onClick: onClick, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, onContextMenu: (e) => e.preventDefault(), className: `flex flex-col shrink-0 items-center justify-center w-full py-8 px-2 min-h-[120px] gap-4 transition-colors relative z-10 select-none ${active
-        ? "text-[rgb(var(--color-accent))]"
-        : "text-[rgb(var(--text-secondary))] hover:text-[rgb(var(--text-primary))]"}`, children: [_jsx("span", { className: `text-xs font-bold uppercase tracking-[0.2em] [writing-mode:vertical-rl] rotate-180 transition-all duration-300 pointer-events-none ${active ? "scale-110 opacity-100" : "scale-100 opacity-60"}`, children: title }), Icon && (_jsx(Icon, { size: 20, className: `transition-all duration-300 -rotate-90 pointer-events-none ${active ? "scale-110 opacity-100" : "scale-100 opacity-60"}` }))] }));
-const RailNavThemeToggle = () => {
-    const { isDark, toggleTheme } = useTheme();
-    return (_jsx("button", { onClick: toggleTheme, className: "mt-auto mb-4 mx-auto p-2 rounded-xl text-[rgb(var(--text-tertiary))] hover:text-[rgb(var(--text-primary))] hover:bg-[rgb(var(--bg-tertiary))] transition-all active:scale-90 group", children: isDark ? (_jsx(Sun, { size: 20, className: "duration-500 group-hover:rotate-180 text-[rgb(var(--color-accent))]" })) : (_jsx(Moon, { size: 20, className: "duration-300 group-hover:-rotate-12 text-[rgb(var(--color-secondary))]" })) }));
-};
-const QuickMenu = ({ visible, items, positionY, selectedIndex }) => {
-    if (!visible || !items || items.length === 0)
-        return null;
-    return (_jsxs("aside", { className: "fixed right-20 z-[100] min-w-[180px] bg-[rgb(var(--bg-elevated))]/95 backdrop-blur-xl rounded-2xl shadow-2xl p-2 border border-[rgb(var(--color-border))] flex flex-col gap-1 transition-all duration-200 ease-out origin-right", style: {
-            top: positionY,
-            transform: "translateY(-50%) scale(1)",
-            animation: "popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-        }, children: [items.map((item, idx) => (_jsxs("button", { className: `flex items-center gap-3 p-3 rounded-xl transition-all duration-150 w-full text-left ${selectedIndex === idx
-                    ? "bg-[rgb(var(--color-accent))] text-white scale-105 shadow-lg"
-                    : "text-[rgb(var(--text-secondary))] hover:bg-[rgb(var(--bg-tertiary))]"}`, children: [item.icon && _jsx(item.icon, { size: 18 }), _jsx("span", { className: "text-sm font-medium", children: item.label })] }, idx))), _jsx("div", { className: "absolute top-1/2 -right-2 w-4 h-4 bg-[rgb(var(--bg-elevated))]/95 rotate-45 border-r border-t border-[rgb(var(--color-border))] -translate-y-1/2" }), _jsx("style", { children: `
-        @keyframes popIn {
-          from { opacity: 0; transform: translateY(-50%) scale(0.8) translateX(20px); }
-          to { opacity: 1; transform: translateY(-50%) scale(1) translateX(0); }
-        }
-      ` })] }));
-};
-const Header = ({ title, onMenuClick, rightAction }) => (_jsxs("header", { className: "sticky top-0 z-20 bg-[rgb(var(--bg-surface))]/90 backdrop-blur-md border-b border-[rgb(var(--color-border-subtle))] px-4 pt-[calc(env(safe-area-inset-top,0px)+12px)] pb-3 flex justify-between items-center shadow-sm select-none", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("button", { onClick: onMenuClick, className: "p-1 -ml-1 text-[rgb(var(--text-secondary))] active:text-[rgb(var(--text-primary))] touch-manipulation", children: _jsx(Menu, { size: 24 }) }), _jsx("h1", { className: "text-xl font-bold text-[rgb(var(--text-primary))] tracking-tight", children: title })] }), rightAction] }));
-const HorizontalTabs = ({ tabs, active, onChange }) => (_jsx("div", { className: "w-full bg-[rgb(var(--bg-main))] border-b border-[rgb(var(--color-border-subtle))] z-10 shrink-0", children: _jsx("div", { className: "flex px-4 gap-6 overflow-x-auto no-scrollbar", children: tabs.map((tab) => (_jsxs("button", { onClick: () => onChange(tab.label), className: `relative py-3 flex items-center gap-2 text-sm font-medium transition-colors whitespace-nowrap ${active === tab.label
-                ? "text-[rgb(var(--text-primary))]"
-                : "text-[rgb(var(--text-muted))]"}`, children: [tab.icon && _jsx(tab.icon, { size: 16 }), tab.label, active === tab.label && (_jsx(motion.div, { layoutId: "activeTabIndicator", className: "absolute bottom-0 left-0 right-0 h-0.5 bg-[rgb(var(--color-accent))]", transition: { type: "spring", stiffness: 300, damping: 30 } }))] }, tab.label))) }) }));
-// --- Hook: useRailNavScroll ---
-function useRailNavScroll(active, navKeys) {
-    const activeIndex = Math.max(0, navKeys.indexOf(active));
-    const scrollContainerRef = useRef(null);
-    const buttonRefs = useRef([]);
-    const [measurements, setMeasurements] = useState({
-        heights: [],
-        offsets: [],
-    });
-    useLayoutEffect(() => {
-        const heights = buttonRefs.current.map((btn) => btn?.offsetHeight || 0);
-        let currentOffset = 0;
-        const offsets = [];
-        for (let i = 0; i < heights.length; i++) {
-            offsets.push(currentOffset);
-            currentOffset += heights[i];
-        }
-        setMeasurements({ heights, offsets });
-    }, [navKeys]);
-    useEffect(() => {
-        if (!scrollContainerRef.current ||
-            measurements.offsets.length === 0 ||
-            measurements.offsets.length <= activeIndex)
-            return;
-        const container = scrollContainerRef.current;
-        const targetY = measurements.offsets[activeIndex];
-        const targetHeight = measurements.heights[activeIndex];
-        const paddingOffset = 24;
-        const absoluteTargetY = targetY + paddingOffset;
-        const scrollTarget = absoluteTargetY - container.clientHeight / 2 + targetHeight / 2;
-        container.scrollTo({ top: scrollTarget, behavior: "smooth" });
-    }, [activeIndex, measurements]);
-    const registerButtonRef = (index, el) => {
-        buttonRefs.current[index] = el;
-    };
-    return {
-        scrollContainerRef,
-        activeHeight: measurements.heights[activeIndex] || 0,
-        activeOffset: measurements.offsets[activeIndex] || 0,
-        registerButtonRef,
-    };
-}
+import { Loader2, LogOut } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+import { mobileLayoutVariants } from "./animations";
+import { Header } from "./components/Header";
+import { HorizontalTabs } from "./components/HorizontalTabs";
+import { QuickMenu } from "./components/QuickMenu";
+import { RailNavButton } from "./components/RailNavButton";
+import { RailNavIndicator } from "./components/RailNavIndicator";
+import { RailNavThemeToggle } from "./components/RailNavThemeToggle";
+import { ThemeProvider } from "./contexts/ThemeContext";
+import { useDrawerStack } from "./hooks/useDrawerStack";
+import { useOnyxNavigation } from "./hooks/useOnyxNavigation";
+import { useOverlayHistory } from "./hooks/useOverlayHistory";
+import { useRailNavScroll } from "./hooks/useRailNavScroll";
+import { checkRefreshing, clamp, getUiZoom, validateLayoutProps, } from "./utils";
 // --- Main Layout Component ---
 const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh, isRefreshing: externalRefreshing, rightAction, initialTab = "home", activeTab: externalActiveTab, activeSubTab: externalActiveSubTab, onNavigate, drawerItems = [], }) => {
     // --- Safety Validations ---
-    if (!tabs || !Array.isArray(tabs) || tabs.length === 0) {
-        throw new Error("[OnyxMobileLayout] Critical Error: 'tabs' prop is required and must be a non-empty array.");
-    }
-    if (!user) {
-        throw new Error("[OnyxMobileLayout] Critical Error: 'user' prop is required to display profile information.");
-    }
-    const [internalActiveTab, setInternalActiveTab] = useState(initialTab);
-    const activeTab = externalActiveTab || internalActiveTab;
+    validateLayoutProps(tabs, user, "OnyxMobileLayout");
+    const { drawerStack, activeDrawer, handleOpenDrawer, handleBackDrawer, handleCloseDrawers, setDrawerStack, } = useDrawerStack();
+    const { activeTab, activeSubTab, currentTabConfig, subTabs, navigateTo, motionData, navKeys, } = useOnyxNavigation({
+        tabs,
+        initialTab,
+        externalActiveTab,
+        externalActiveSubTab,
+        onNavigate,
+    });
     const [isOpen, setIsOpen] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
-    const [activeDrawer, setActiveDrawer] = useState(null);
     const [pullY, setPullY] = useState(0);
     const [internalRefreshing, setInternalRefreshing] = useState(false);
-    const currentTabConfig = tabs.find((t) => t.id === activeTab);
-    const subTabs = currentTabConfig?.subTabs ?? [];
-    const [internalSubTab, setInternalSubTab] = useState(subTabs[0]?.label || "");
-    const subTab = externalActiveSubTab || internalSubTab;
-    const navigateTo = (tabId, subTabLabel) => {
-        let nextTab = tabId || activeTab;
-        let nextSub = subTabLabel || subTab;
-        if (tabId) {
-            setInternalActiveTab(tabId);
-            const targetTab = tabs.find((t) => t.id === tabId);
-            const isValid = (targetTab?.subTabs || []).some((st) => st.label === nextSub);
-            if (!isValid && targetTab?.subTabs?.[0]) {
-                nextSub = targetTab.subTabs[0].label;
-                setInternalSubTab(nextSub);
-            }
-        }
-        if (subTabLabel) {
-            nextSub = subTabLabel;
-            setInternalSubTab(subTabLabel);
-        }
-        if (onNavigate) {
-            const targetTab = tabs.find((t) => t.id === nextTab);
-            let path = targetTab?.path || "";
-            const st = (targetTab?.subTabs || []).find((s) => s.label === nextSub);
-            if (st?.path) {
-                if (st.path.startsWith("/")) {
-                    path = st.path;
-                }
-                else {
-                    const base = path.endsWith("/") ? path : path + "/";
-                    path = base + st.path;
-                }
-            }
-            if (path)
-                onNavigate(path);
-        }
-    };
-    const currentSubTabConfig = subTabs.find((st) => st.label === subTab);
-    const isRefreshing = !!(currentSubTabConfig?.isRefreshing ||
-        currentTabConfig?.isRefreshing ||
-        externalRefreshing ||
-        internalRefreshing);
-    const navKeys = useMemo(() => tabs.map((t) => t.id), [tabs]);
-    const { scrollContainerRef, activeHeight, activeOffset, registerButtonRef } = useRailNavScroll(activeTab, navKeys);
+    const isRefreshing = checkRefreshing(subTabs, activeSubTab, currentTabConfig, externalRefreshing, internalRefreshing);
+    const { scrollContainerRef, activeHeight, activeOffset, registerButtonRef } = useRailNavScroll(activeTab, navKeys, 24);
     const DRAWER_WIDTH = 220;
     const startX = useRef(0);
     const startY = useRef(0);
@@ -156,112 +55,47 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
     const holdTimer = useRef(null);
     const startYRef = useRef(0);
     const isDraggingMenu = useRef(false);
-    const isClosingViaBack = useRef(false);
     const isAnyOverlayOpen = isOpen || !!activeDrawer;
+    console.log("[OnyxMobileLayout] Render State:", {
+        isOpen,
+        activeDrawer,
+        isAnyOverlayOpen,
+        stackLength: drawerStack.length,
+        activeTab,
+        activeSubTab,
+    });
     // Handle Hardware Back Button for Drawer and Active Panels
-    useEffect(() => {
-        if (!isAnyOverlayOpen)
+    const lastBackTime = useRef(0);
+    const handleOverlayBack = React.useCallback(() => {
+        const now = Date.now();
+        const timeSinceLastCall = now - lastBackTime.current;
+        // Debounce: Ignore rapid duplicate calls (e.g., from event propagation)
+        if (timeSinceLastCall < 150 && lastBackTime.current !== 0) {
+            console.warn(`[OnyxMobileLayout] ⚠️ Ignoring duplicate onBack (${timeSinceLastCall}ms since last call)`, "\nTip: Add e.stopPropagation() to your drawer close button click handler");
             return;
-        const marker = "onyx-overlay-" + Math.random().toString(36).substring(7);
-        window.history.pushState({ onyxMarker: marker }, "");
-        const onPopState = () => {
-            isClosingViaBack.current = true;
-            setIsOpen(false);
-            setActiveDrawer(null);
-        };
-        window.addEventListener("popstate", onPopState);
-        return () => {
-            window.removeEventListener("popstate", onPopState);
-            if (!isClosingViaBack.current) {
-                if (window.history.state?.onyxMarker === marker) {
-                    window.history.back();
-                }
-            }
-            isClosingViaBack.current = false;
-        };
-    }, [isAnyOverlayOpen]);
-    // Navigation Logic
-    useEffect(() => {
-        if (currentTabConfig && currentTabConfig.subTabs.length > 0) {
-            const isValid = currentTabConfig.subTabs.some((st) => st.label === subTab);
-            if (!isValid && currentTabConfig.subTabs.length > 0)
-                navigateTo(undefined, currentTabConfig.subTabs[0].label);
         }
-    }, [activeTab, tabs, subTab, currentTabConfig]);
-    const [motionData, setMotionData] = useState({
-        tab: activeTab,
-        sub: subTab,
-        dir: 0,
-        type: "tab",
-    });
-    // Critical Logic: determine animation style and direction in render
-    if (activeTab !== motionData.tab) {
-        const prevIdx = navKeys.indexOf(motionData.tab);
-        const nextIdx = navKeys.indexOf(activeTab);
-        setMotionData({
-            tab: activeTab,
-            sub: subTab,
-            dir: nextIdx > prevIdx ? 1 : -1,
-            type: "tab",
+        lastBackTime.current = now;
+        console.log("[OnyxMobileLayout] Overlay onBack triggered (Hardware/PopState)");
+        setDrawerStack((prev) => {
+            if (prev.length > 0) {
+                console.log("[OnyxMobileLayout] Popping drawer stack, new length:", prev.length - 1);
+                return prev.slice(0, -1);
+            }
+            console.log("[OnyxMobileLayout] No drawers left, closing main drawer");
+            setIsOpen(false);
+            return prev;
         });
-    }
-    else if (subTab !== motionData.sub) {
-        const subLabels = subTabs.map((st) => st.label);
-        const prevIdx = subLabels.indexOf(motionData.sub);
-        const nextIdx = subLabels.indexOf(subTab);
-        // Only animate subtabs if they both exist in the CURRENT tab's context
-        if (prevIdx !== -1 && nextIdx !== -1) {
-            setMotionData({
-                tab: activeTab,
-                sub: subTab,
-                dir: nextIdx > prevIdx ? 1 : -1,
-                type: "subtab",
-            });
-        }
-        else {
-            // Just sync without directional animation if it's an jump/reset
-            setMotionData({ ...motionData, sub: subTab, dir: 0 });
-        }
-    }
-    // Animation variants
-    const variants = {
-        enter: (d) => ({
-            x: d.type === "subtab" ? (d.dir > 0 ? 80 : -80) : 0,
-            y: d.type === "tab" ? (d.dir > 0 ? "100%" : "-100%") : 0,
-            scale: d.type === "subtab" ? 0.95 : 1,
-            scaleY: d.type === "tab" ? 0.7 : 1,
-            skewY: d.type === "tab" ? (d.dir > 0 ? 15 : -15) : 0,
-            opacity: 0,
-        }),
-        center: {
-            x: 0,
-            y: 0,
-            scale: 1,
-            scaleY: 1,
-            skewY: 0,
-            opacity: 1,
-            transition: {
-                duration: 0.5,
-                ease: [0.16, 1, 0.3, 1],
-                scaleY: {
-                    values: [0.7, 1.15, 1],
-                    times: [0, 0.5, 1],
-                    duration: 0.5,
-                    ease: [0.16, 1, 0.3, 1],
-                },
-                skewY: { duration: 0.4, ease: [0.16, 1, 0.3, 1] },
-            },
-        },
-        exit: (d) => ({
-            x: d.type === "subtab" ? (d.dir > 0 ? -80 : 80) : 0,
-            y: d.type === "tab" ? (d.dir > 0 ? "-100%" : "100%") : 0,
-            scale: d.type === "subtab" ? 1.05 : 1,
-            scaleY: d.type === "tab" ? 1.2 : 1,
-            skewY: d.type === "tab" ? (d.dir > 0 ? -10 : 10) : 0,
-            opacity: 0,
-            transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] },
-        }),
-    };
+    }, [setDrawerStack]);
+    const handleOverlayClose = React.useCallback(() => {
+        console.log("[OnyxMobileLayout] Overlay onClose triggered (Direct Close)");
+        setIsOpen(false);
+    }, []);
+    const depth = (isOpen ? 1 : 0) + drawerStack.length;
+    useOverlayHistory({
+        depth,
+        onBack: handleOverlayBack,
+        platform: "mobile",
+    });
     const Drawer = () => (_jsxs("aside", { className: "fixed inset-y-0 left-0 w-[220px] bg-[var(--drawer-bg,rgb(18,18,18))] text-[var(--drawer-text,rgb(255,255,255))] z-0 flex flex-col pt-12 pb-6 px-6 overflow-hidden", children: [_jsxs("div", { className: "mb-8 pl-2", children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-gradient-to-tr from-[rgb(var(--color-secondary))] to-[rgb(var(--color-accent))] mb-4 p-0.5", children: _jsx("img", { src: user.avatar, className: "w-full h-full rounded-full object-cover border-2 border-[rgb(var(--bg-main))]" }) }), _jsx("h2", { className: "text-xl font-bold whitespace-nowrap", children: user.name }), _jsx("p", { className: "text-sm text-[rgb(var(--text-muted))]", children: user.handle })] }), _jsx("div", { className: "flex-1 space-y-1", children: (drawerItems.length > 0
                     ? drawerItems
                     : (tabs[0]?.subTabs || []).map((st) => ({
@@ -273,12 +107,12 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
                         navigateTo(item.targetTab, item.targetSubTab);
                         if (item.onClick)
                             item.onClick({
-                                openDrawer: (id) => setActiveDrawer(id),
+                                openDrawer: (id) => handleOpenDrawer(id),
                             });
                         setIsOpen(false);
                     }, className: "w-full flex items-center gap-4 p-3 text-[rgb(var(--text-muted))] hover:text-[rgb(var(--text-primary))] hover:bg-[rgb(var(--bg-tertiary))] rounded-xl transition-all group font-medium", children: [_jsx(item.icon, { size: 20, className: "group-hover:scale-110 transition-transform" }), _jsx("span", { children: item.label })] }, item.label))) }), _jsx("div", { className: "mt-auto", children: _jsxs("button", { onClick: onSignOut, className: "flex items-center gap-3 text-[rgb(var(--status-error))] font-medium p-3 w-full hover:bg-[rgb(var(--bg-tertiary))] rounded-xl transition-colors", children: [_jsx(LogOut, { size: 20 }), _jsx("span", { children: "Sign Out" })] }) })] }));
     const handleTouchStart = (e) => {
-        const zoom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--ui-zoom") || "1");
+        const zoom = getUiZoom();
         startX.current = e.touches[0].clientX / zoom;
         startY.current = e.touches[0].clientY / zoom;
         dragXRef.current = isOpen ? DRAWER_WIDTH : 0;
@@ -291,13 +125,13 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
     const handleTouchMove = (e) => {
         if (!isGesturing.current || quickMenu.visible || isDraggingMenu.current)
             return;
-        const zoom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--ui-zoom") || "1");
+        const zoom = getUiZoom();
         const dx = e.touches[0].clientX / zoom - startX.current;
         const dy = e.touches[0].clientY / zoom - startY.current;
         lastDxRef.current = dx;
         if (!isHorizontal.current && !isVerticalPull.current && !isDragging) {
             if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 10) {
-                if (!isOpen && dx > 0 && subTabs[0]?.label === subTab) {
+                if (!isOpen && dx > 0 && subTabs[0]?.label === activeSubTab) {
                     isHorizontal.current = true;
                     setIsDragging(true);
                 }
@@ -313,7 +147,7 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
             }
         }
         if (isHorizontal.current) {
-            const newX = Math.max(0, Math.min((isOpen ? DRAWER_WIDTH : 0) + dx, DRAWER_WIDTH));
+            const newX = clamp((isOpen ? DRAWER_WIDTH : 0) + dx, 0, DRAWER_WIDTH);
             dragXRef.current = newX;
             setRenderDragX(newX);
         }
@@ -335,7 +169,7 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
         if (isTabSwipe.current) {
             isTabSwipe.current = false;
             if (Math.abs(lastDxRef.current) > 50) {
-                const idx = subTabs.findIndex((t) => t.label === subTab);
+                const idx = subTabs.findIndex((t) => t.label === activeSubTab);
                 if (lastDxRef.current < 0 && idx < subTabs.length - 1)
                     navigateTo(undefined, subTabs[idx + 1].label);
                 else if (lastDxRef.current > 0 && idx > 0)
@@ -344,7 +178,7 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
         }
         if (isVerticalPull.current) {
             if (pullY > 60) {
-                const currentSubTab = subTabs.find((st) => st.label === subTab);
+                const currentSubTab = subTabs.find((st) => st.label === activeSubTab);
                 const refreshHandler = currentSubTab?.onRefresh || currentTabConfig?.onRefresh || onRefresh;
                 if (refreshHandler) {
                     const result = refreshHandler();
@@ -429,7 +263,7 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
         const ITEM_HEIGHT = 48;
         const offset = (quickMenu.items.length - 1) / 2;
         const idx = Math.round(diff / ITEM_HEIGHT + offset);
-        const clampedIdx = Math.max(0, Math.min(idx, quickMenu.items.length - 1));
+        const clampedIdx = clamp(idx, 0, quickMenu.items.length - 1);
         setQuickMenu((prev) => ({ ...prev, selectedIndex: clampedIdx }));
     };
     const handleNavTouchEnd = (tabId) => {
@@ -439,7 +273,7 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
             if (quickMenu.selectedIndex !== -1 &&
                 quickMenu.items[quickMenu.selectedIndex]?.onClick) {
                 quickMenu.items[quickMenu.selectedIndex].onClick({
-                    openDrawer: (id) => setActiveDrawer(id),
+                    openDrawer: (id) => handleOpenDrawer(id),
                 });
             }
             setQuickMenu((prev) => ({ ...prev, visible: false, selectedIndex: -1 }));
@@ -460,7 +294,7 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
                         ? "none"
                         : "transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.3s",
                     overflow: "hidden",
-                }, children: [isOpen && !isDragging && (_jsx("div", { className: "absolute inset-0 z-50 bg-black/20", onClick: () => setIsOpen(false) })), _jsxs("div", { className: "flex-1 flex flex-col h-full mr-12 relative bg-[rgb(var(--bg-main))]", children: [_jsx(Header, { title: currentTabConfig?.navTitle || currentTabConfig?.label || "App", onMenuClick: () => setIsOpen(!isOpen), rightAction: currentTabConfig?.rightAction || rightAction }), _jsx(HorizontalTabs, { tabs: subTabs, active: subTab, onChange: (label) => navigateTo(undefined, label) }), _jsxs("main", { ref: mainScrollRef, className: "flex-1 overflow-y-auto no-scrollbar overscroll-contain relative touch-pan-y", children: [_jsx("div", { className: "absolute top-0 left-0 right-0 flex justify-center items-center pointer-events-none z-0", style: {
+                }, children: [isOpen && !isDragging && (_jsx("div", { className: "absolute inset-0 z-50 bg-black/20", onClick: () => setIsOpen(false) })), _jsxs("div", { className: "flex-1 flex flex-col h-full mr-12 relative bg-[rgb(var(--bg-main))]", children: [_jsx(Header, { title: currentTabConfig?.navTitle || currentTabConfig?.label || "App", onMenuClick: () => setIsOpen(!isOpen), rightAction: currentTabConfig?.rightAction || rightAction, isMobile: true }), _jsx(HorizontalTabs, { tabs: subTabs, active: activeSubTab, onChange: (label) => navigateTo(undefined, label), isMobile: true }), _jsxs("main", { ref: mainScrollRef, className: "flex-1 overflow-y-auto no-scrollbar overscroll-contain relative touch-pan-y", children: [_jsx("div", { className: "absolute top-0 left-0 right-0 flex justify-center items-center pointer-events-none z-0", style: {
                                             height: `${pullY}px`,
                                             opacity: Math.min(pullY / 40, 1),
                                             transition: isVerticalPull.current
@@ -468,7 +302,7 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
                                                 : "height 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s",
                                         }, children: _jsx("div", { className: `p-2 bg-[rgb(var(--bg-surface))] rounded-full shadow-md border border-[rgb(var(--color-border-subtle))] ${isRefreshing || (pullY > 20 && !isGesturing.current)
                                                 ? "animate-spin text-[rgb(var(--color-accent))]"
-                                                : "text-[rgb(var(--text-secondary))]"}`, children: _jsx(Loader2, { size: 20 }) }) }), _jsx(AnimatePresence, { mode: "popLayout", custom: motionData, initial: false, children: _jsx(motion.div, { custom: motionData, variants: variants, initial: "enter", animate: "center", exit: "exit", className: "w-full min-h-full origin-center", style: {
+                                                : "text-[rgb(var(--text-secondary))]"}`, children: _jsx(Loader2, { size: 20 }) }) }), _jsx(AnimatePresence, { mode: "popLayout", custom: motionData, initial: false, children: _jsx(motion.div, { custom: motionData, variants: mobileLayoutVariants, initial: "enter", animate: "center", exit: "exit", className: "w-full min-h-full origin-center", style: {
                                                 width: "100%",
                                                 willChange: "transform, opacity, filter",
                                             }, children: _jsx("div", { style: {
@@ -478,8 +312,28 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
                                                     transition: isVerticalPull.current
                                                         ? "none"
                                                         : "transform 0.3s ease-out",
-                                                }, children: subTabs.find((st) => st.label === subTab)?.view &&
-                                                    React.createElement(subTabs.find((st) => st.label === subTab).view, { onOpenDrawer: setActiveDrawer }) }) }, `${activeTab}-${subTab}`) })] })] }), _jsxs("nav", { className: "absolute right-0 top-0 bottom-0 w-12 bg-[rgb(var(--bg-tertiary))] border-l border-[rgb(var(--color-border-subtle))] flex flex-col z-50 pb-[env(safe-area-inset-bottom,0px)]", children: [_jsxs("div", { ref: scrollContainerRef, className: "flex-1 overflow-y-auto no-scrollbar py-4 w-full relative", children: [_jsx(RailNavIndicator, { height: activeHeight, offset: activeOffset }), tabs.map((tab, idx) => (_jsx(RailNavButton, { title: tab.label, icon: tab.icon, active: activeTab === tab.id, onClick: () => handleNavTouchEnd(tab.id), onTouchStart: (e) => handleNavTouchStart(e, tab), onTouchMove: handleNavTouchMove, onTouchEnd: () => handleNavTouchEnd(tab.id), onRegisterRef: (el) => registerButtonRef(idx, el) }, tab.id)))] }), _jsx(RailNavThemeToggle, {})] })] }), _jsx(QuickMenu, { ...quickMenu }), Object.entries(drawers || {}).map(([key, DrawerComp]) => (_jsx(DrawerComp, { isOpen: activeDrawer === key, onClose: () => setActiveDrawer(null) }, key))), _jsx("style", { children: `
+                                                }, children: subTabs.find((st) => st.label === activeSubTab)?.view &&
+                                                    React.createElement(subTabs.find((st) => st.label === activeSubTab)
+                                                        .view, {
+                                                        onOpenDrawer: handleOpenDrawer,
+                                                        openDrawer: handleOpenDrawer,
+                                                    }) }) }, `${activeTab}-${activeSubTab}`) })] })] }), _jsxs("nav", { className: "absolute right-0 top-0 bottom-0 w-12 bg-[rgb(var(--bg-tertiary))] border-l border-[rgb(var(--color-border-subtle))] flex flex-col z-50 pb-[env(safe-area-inset-bottom,0px)]", children: [_jsxs("div", { ref: scrollContainerRef, className: "flex-1 overflow-y-auto no-scrollbar py-4 w-full relative", children: [_jsx(RailNavIndicator, { height: activeHeight, offset: activeOffset }), tabs.map((tab, idx) => (_jsx(RailNavButton, { title: tab.label, icon: tab.icon, active: activeTab === tab.id, onClick: () => handleNavTouchEnd(tab.id), onTouchStart: (e) => handleNavTouchStart(e, tab), onTouchMove: handleNavTouchMove, onTouchEnd: () => handleNavTouchEnd(tab.id), onRegisterRef: (el) => registerButtonRef(idx, el), isMobile: true }, tab.id)))] }), _jsx(RailNavThemeToggle, {})] })] }), _jsx(QuickMenu, { ...quickMenu, isMobile: true }), drawerStack.map((id, index) => {
+                const DrawerComp = drawers[id];
+                if (!DrawerComp)
+                    return null;
+                const isTop = index === drawerStack.length - 1;
+                return (_jsx(DrawerComp, { isOpen: isTop, onClose: () => {
+                        if (isTop) {
+                            console.log("[OnyxMobileLayout] Drawer onClose Event:", id);
+                            handleBackDrawer();
+                        }
+                    }, onBack: () => {
+                        if (isTop) {
+                            console.log("[OnyxMobileLayout] Drawer onBack Event:", id);
+                            handleOverlayBack();
+                        }
+                    }, onOpenDrawer: handleOpenDrawer, openDrawer: handleOpenDrawer }, `${id}-${index}`));
+            }), _jsx("style", { children: `
         .no-scrollbar::-webkit-scrollbar { display: none; }
         .touch-manipulation { touch-action: manipulation; }
         .touch-pan-y { touch-action: pan-y; }