@kawaiininja/layouts 1.0.3

package/README.md

@@ -0,0 +1,110 @@
+# @onyx/layouts
+
+High-performance, premium mobile-first layouts for the Onyx Framework. Designed with a focus on fluid gestures, modularity, and state-of-the-art aesthetics.
+
+## ✨ Features
+
+- **Gesture-Driven Navigation**: Horizontal tab swiping and vertical pull-to-refresh logic.
+- **Radial Quick Actions**: Long-press navigation keys to trigger a radial menu for rapid access to actions.
+- **Dynamic Headers**: Auto-updating header titles based on navigation state, with support for custom actions.
+- **Modular Drawers**: Easily integrate side menus and custom bottom sheets/panels.
+- **Integrated Theme Support**: Built-in dark/light mode toggle with persistence and system-wide CSS variable injection.
+- **Hardware Back Button Support**: Sophisticated history management for closing overlays and panels seamlessly on mobile devices.
+
+## 🚀 Installation
+
+```bash
+npm install @onyx/layouts
+```
+
+Note: This package requires `framer-motion`, `lucide-react`, and `react` >= 18.0.0.
+
+## 📦 Usage
+
+```jsx
+import { OnyxMobileLayout } from "@onyx/layouts";
+import { Home, Settings, PenTool, RefreshCw } from "lucide-react";
+
+const MyLayout = () => {
+  const tabs = [
+    {
+      id: "home",
+      icon: Home,
+      label: "Home",
+      navTitle: "My Feed",
+      subTabs: [{ label: "Overview", icon: Grid, view: MyViewComponent }],
+      quickActions: [
+        {
+          icon: PenTool,
+          label: "Create",
+          onClick: ({ openDrawer }) => openDrawer("editor"),
+        },
+      ],
+      onRefresh: () => fetchData(),
+      isRefreshing: loadingState,
+    },
+  ];
+
+  return (
+    <OnyxMobileLayout
+      tabs={tabs}
+      user={{ name: "Alex", handle: "@alex", avatar: "url" }}
+      drawers={{
+        editor: MyEditorPanel,
+      }}
+    />
+  );
+};
+```
+
+## 🛠️ Configuration API
+
+### OnyxMobileLayoutProps
+
+| Prop           | Type                        | Description                                             |
+| :------------- | :-------------------------- | :------------------------------------------------------ |
+| `tabs`         | `TabConfig[]`               | Array of main navigation tabs (right rail).             |
+| `user`         | `UserConfig`                | User profile data for the side drawer.                  |
+| `drawers`      | `Record<string, Component>` | Dictionary of custom panels/bottom sheets.              |
+| `drawerItems`  | `DrawerItemConfig[]`        | Custom links for the main side drawer.                  |
+| `onSignOut`    | `() => void`                | Callback triggered when the sign-out button is clicked. |
+| `onRefresh`    | `() => void`                | (Global) Callback for pull-to-refresh.                  |
+| `isRefreshing` | `boolean`                   | (Global) Refreshing state.                              |
+| `initialTab`   | `string`                    | ID of the tab to show on mount (default: 'home').       |
+
+### TabConfig
+
+| Field          | Type                  | Description                                       |
+| :------------- | :-------------------- | :------------------------------------------------ |
+| `id`           | `string`              | Unique identifier for navigation.                 |
+| `icon`         | `LucideIcon`          | Icon for the navigation rail.                     |
+| `label`        | `string`              | Label for the navigation rail.                    |
+| `navTitle`     | `string`              | (Optional) Title shown in the header when active. |
+| `subTabs`      | `SubTabConfig[]`      | Array of nested horizontal tabs.                  |
+| `quickActions` | `QuickActionConfig[]` | Actions triggered by long-press on the nav key.   |
+| `onRefresh`    | `() => void`          | Tab-specific refresh callback.                    |
+| `isRefreshing` | `boolean`             | Tab-specific refresh state.                       |
+
+### QuickActionConfig / DrawerItemConfig
+
+Quick actions and Drawer items support an `onClick` callback that receives a context object:
+
+```typescript
+onClick: ({ openDrawer: (id: string) => void }) => void
+```
+
+## 🎨 Theme Variables
+
+The layout relies on the following CSS variables for its design system:
+
+- `--bg-main`: Page background
+- `--bg-surface`: Header/Tab background
+- `--bg-elevated`: Drawer/Overlay background
+- `--color-accent`: Highlight/Active color
+- `--text-primary`: Main text
+- `--text-muted`: Secondary text
+- `--color-border-subtle`: Borders and dividers
+
+## ⚖️ License
+
+MIT © Vinay

package/dist/MobileLayout.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { OnyxMobileLayoutProps } from "./types";
+export declare const ThemeProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const OnyxMobileLayout: (props: OnyxMobileLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/MobileLayout.js

@@ -0,0 +1,391 @@
+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, { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+// --- Theme Context & Hook ---
+const ThemeContext = createContext(null);
+export const ThemeProvider = ({ children }) => {
+    const [isDark, setIsDark] = useState(() => {
+        if (typeof window !== "undefined") {
+            const saved = localStorage.getItem("theme");
+            return saved ? saved === "dark" : true;
+        }
+        return true;
+    });
+    useEffect(() => {
+        const themeValue = isDark ? "dark" : "light";
+        localStorage.setItem("theme", themeValue);
+        if (!isDark) {
+            document.documentElement.dataset.theme = "light";
+        }
+        else {
+            document.documentElement.removeAttribute("data-theme");
+        }
+    }, [isDark]);
+    const toggleTheme = () => setIsDark((prev) => !prev);
+    return (_jsx(ThemeContext.Provider, { value: { isDark, toggleTheme }, children: children }));
+};
+const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context)
+        throw new Error("useTheme must be used within a ThemeProvider");
+    return context;
+};
+// --- 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", 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 ${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 ${active ? "scale-110 opacity-100" : "scale-100 opacity-60"}`, children: title }), Icon && (_jsx(Icon, { size: 20, className: `transition-all duration-300 -rotate-90 ${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)
+        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 py-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))]", 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,
+    };
+}
+// --- Main Layout Component ---
+const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh, isRefreshing: externalRefreshing, rightAction, initialTab = "home", drawerItems = [], }) => {
+    const [activeTab, setActiveTab] = useState(initialTab);
+    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 isRefreshing = currentTabConfig?.isRefreshing ?? externalRefreshing ?? internalRefreshing;
+    const subTabs = currentTabConfig?.subTabs || [];
+    const [subTab, setSubTab] = useState(subTabs[0]?.label || "");
+    const navKeys = useMemo(() => tabs.map((t) => t.id), [tabs]);
+    const { scrollContainerRef, activeHeight, activeOffset, registerButtonRef } = useRailNavScroll(activeTab, navKeys);
+    const DRAWER_WIDTH = 220;
+    const startX = useRef(0);
+    const startY = useRef(0);
+    const dragXRef = useRef(0);
+    const lastDxRef = useRef(0);
+    const isGesturing = useRef(false);
+    const isHorizontal = useRef(false);
+    const isVerticalPull = useRef(false);
+    const isTabSwipe = useRef(false);
+    const mainScrollRef = useRef(null);
+    const [renderDragX, setRenderDragX] = useState(0);
+    const [quickMenu, setQuickMenu] = useState({
+        visible: false,
+        items: [],
+        positionY: 0,
+        selectedIndex: -1,
+        tabId: "",
+    });
+    const holdTimer = useRef(null);
+    const startYRef = useRef(0);
+    const isDraggingMenu = useRef(false);
+    const isClosingViaBack = useRef(false);
+    const isAnyOverlayOpen = isOpen || !!activeDrawer;
+    // Handle Hardware Back Button for Drawer and Active Panels
+    useEffect(() => {
+        if (!isAnyOverlayOpen)
+            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)
+                setSubTab(currentTabConfig.subTabs[0].label);
+        }
+    }, [activeTab, tabs, subTab, currentTabConfig]);
+    const [[prevActive, direction], setDir] = useState([activeTab, 0]);
+    if (activeTab !== prevActive) {
+        const currentIdx = navKeys.indexOf(activeTab);
+        const prevIdx = navKeys.indexOf(prevActive);
+        setDir([activeTab, currentIdx > prevIdx ? 1 : -1]);
+    }
+    // Animation variants
+    const variants = {
+        enter: (d) => ({
+            y: d.direction > 0 ? "100%" : "-100%",
+            scaleY: 0.7,
+            opacity: 0,
+        }),
+        center: {
+            y: 0,
+            scaleY: 1,
+            opacity: 1,
+            transition: {
+                duration: 0.55,
+                ease: [0.8, 0, 0.1, 1],
+                scaleY: {
+                    duration: 0.55,
+                    ease: [0.8, 0, 0.1, 1],
+                },
+            },
+        },
+        exit: (d) => ({
+            y: d.direction > 0 ? "-100%" : "100%",
+            scaleY: 1.2,
+            opacity: 0,
+            transition: { duration: 0.4, ease: [0.8, 0, 0.1, 1] },
+        }),
+    };
+    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) => ({
+                        label: st.label,
+                        icon: st.icon,
+                        targetTab: tabs[0].id,
+                        targetSubTab: st.label,
+                    }))).map((item) => (_jsxs("button", { onClick: () => {
+                        if (item.targetTab)
+                            setActiveTab(item.targetTab);
+                        if (item.targetSubTab)
+                            setSubTab(item.targetSubTab);
+                        if (item.onClick)
+                            item.onClick({
+                                openDrawer: (id) => setActiveDrawer(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) => {
+        if (quickMenu.visible || isDraggingMenu.current)
+            return;
+        startX.current = e.touches[0].clientX;
+        startY.current = e.touches[0].clientY;
+        dragXRef.current = isOpen ? DRAWER_WIDTH : 0;
+        setRenderDragX(dragXRef.current);
+        isGesturing.current = true;
+        isHorizontal.current = false;
+        isVerticalPull.current = false;
+        isTabSwipe.current = false;
+    };
+    const handleTouchMove = (e) => {
+        if (!isGesturing.current || quickMenu.visible || isDraggingMenu.current)
+            return;
+        const dx = e.touches[0].clientX - startX.current;
+        const dy = e.touches[0].clientY - 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) {
+                    isHorizontal.current = true;
+                    setIsDragging(true);
+                }
+                else {
+                    isTabSwipe.current = true;
+                }
+            }
+            else if (dy > 0 &&
+                Math.abs(dy) > 10 &&
+                mainScrollRef.current?.scrollTop <= 0 &&
+                !isRefreshing) {
+                isVerticalPull.current = true;
+            }
+        }
+        if (isHorizontal.current) {
+            const newX = Math.max(0, Math.min((isOpen ? DRAWER_WIDTH : 0) + dx, DRAWER_WIDTH));
+            dragXRef.current = newX;
+            setRenderDragX(newX);
+        }
+        if (isVerticalPull.current) {
+            setPullY(Math.pow(Math.max(0, dy), 0.85));
+            if (e.cancelable)
+                e.preventDefault();
+        }
+    };
+    const handleTouchEnd = () => {
+        isGesturing.current = false;
+        if (isHorizontal.current) {
+            setIsDragging(false);
+            isHorizontal.current = false;
+            const shouldOpen = dragXRef.current > DRAWER_WIDTH / 2;
+            setIsOpen(shouldOpen);
+            setRenderDragX(shouldOpen ? DRAWER_WIDTH : 0);
+        }
+        if (isTabSwipe.current) {
+            isTabSwipe.current = false;
+            if (Math.abs(lastDxRef.current) > 50) {
+                const idx = subTabs.findIndex((t) => t.label === subTab);
+                if (lastDxRef.current < 0 && idx < subTabs.length - 1)
+                    setSubTab(subTabs[idx + 1].label);
+                else if (lastDxRef.current > 0 && idx > 0)
+                    setSubTab(subTabs[idx - 1].label);
+            }
+        }
+        if (isVerticalPull.current) {
+            if (pullY > 60) {
+                const refreshHandler = currentTabConfig?.onRefresh || onRefresh;
+                if (refreshHandler) {
+                    refreshHandler();
+                    setPullY(60);
+                }
+                else {
+                    setInternalRefreshing(true);
+                    setPullY(60);
+                    setTimeout(() => {
+                        setInternalRefreshing(false);
+                        setPullY(0);
+                    }, 2000);
+                }
+            }
+            else {
+                setPullY(0);
+            }
+        }
+    };
+    // Reset pull if tab changes while refreshing
+    useEffect(() => {
+        setPullY(0);
+    }, [activeTab]);
+    useEffect(() => {
+        if (!isRefreshing && pullY === 60) {
+            setPullY(0);
+        }
+    }, [isRefreshing]);
+    // Quick Menu Logic
+    const handleNavTouchStart = (e, tab) => {
+        if (isDraggingMenu.current)
+            return;
+        const y = e.touches[0].clientY;
+        startYRef.current = y;
+        holdTimer.current = setTimeout(() => {
+            isDraggingMenu.current = true;
+            if (navigator.vibrate)
+                navigator.vibrate(50);
+            setQuickMenu({
+                visible: true,
+                items: tab.quickActions,
+                positionY: y,
+                selectedIndex: -1,
+                tabId: tab.id,
+            });
+        }, 400);
+    };
+    const handleNavTouchMove = (e) => {
+        const y = e.touches[0].clientY;
+        const diff = y - startYRef.current;
+        if (!isDraggingMenu.current) {
+            if (Math.abs(diff) > 10)
+                clearTimeout(holdTimer.current);
+            return;
+        }
+        // Lock the event and prevent parent scrolling
+        if (e.cancelable)
+            e.preventDefault();
+        e.stopPropagation();
+        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));
+        setQuickMenu((prev) => ({ ...prev, selectedIndex: clampedIdx }));
+    };
+    const handleNavTouchEnd = (tabId) => {
+        clearTimeout(holdTimer.current);
+        if (isDraggingMenu.current) {
+            isDraggingMenu.current = false;
+            if (quickMenu.selectedIndex !== -1 &&
+                quickMenu.items[quickMenu.selectedIndex]?.onClick) {
+                quickMenu.items[quickMenu.selectedIndex].onClick({
+                    openDrawer: (id) => setActiveDrawer(id),
+                });
+            }
+            setQuickMenu((prev) => ({ ...prev, visible: false, selectedIndex: -1 }));
+        }
+        else {
+            setActiveTab(tabId);
+        }
+    };
+    const currentTranslate = isDragging ? renderDragX : isOpen ? DRAWER_WIDTH : 0;
+    const progress = currentTranslate / DRAWER_WIDTH;
+    return (_jsxs("div", { className: "w-full bg-[rgb(var(--bg-main))] overflow-hidden relative h-full", onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [_jsx(Drawer, {}), _jsxs("div", { className: "absolute inset-0 z-10 bg-[rgb(var(--bg-main))] flex shadow-2xl origin-left", style: {
+                    transform: `translateX(${currentTranslate}px) scale(${1 - progress * 0.05})`,
+                    borderRadius: `${progress * 24}px`,
+                    transition: isDragging || isVerticalPull.current
+                        ? "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: setSubTab }), _jsxs("main", { ref: mainScrollRef, className: "flex-1 overflow-y-auto no-scrollbar overscroll-contain relative mr-4", 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),
+                                        }, children: _jsx("div", { className: `p-2 bg-[rgb(var(--bg-surface))] rounded-full shadow-md border border-[rgb(var(--color-border-subtle))] ${isRefreshing
+                                                ? "animate-spin text-[rgb(var(--color-accent))]"
+                                                : "text-[rgb(var(--text-secondary))]"}`, children: _jsx(Loader2, { size: 20 }) }) }), _jsx(AnimatePresence, { mode: "popLayout", custom: { direction }, initial: false, children: _jsx(motion.div, { custom: { direction }, variants: variants, initial: "enter", animate: "center", exit: "exit", className: "w-full min-h-full", children: _jsx("div", { style: {
+                                                    transform: `translateY(${pullY}px)`,
+                                                    minHeight: "100%",
+                                                }, children: subTabs.find((st) => st.label === subTab)?.view &&
+                                                    React.createElement(subTabs.find((st) => st.label === subTab).view, { onOpenDrawer: setActiveDrawer }) }) }, activeTab) })] })] }), _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", 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: `.no-scrollbar::-webkit-scrollbar { display: none; }` })] }));
+};
+export const OnyxMobileLayout = (props) => (_jsx(ThemeProvider, { children: _jsx(OnyxMobileLayoutBase, { ...props }) }));

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./MobileLayout";
+export * from "./types";

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./MobileLayout";
+export * from "./types";

package/dist/types.d.ts

@@ -0,0 +1,50 @@
+import { ComponentType, ReactNode } from "react";
+export interface SubTabConfig {
+    label: string;
+    icon: ComponentType<any>;
+    view: ComponentType<any>;
+}
+export interface QuickActionConfig {
+    label: string;
+    icon: ComponentType<any>;
+    onClick?: () => void;
+}
+export interface TabConfig {
+    id: string;
+    label: string;
+    icon: ComponentType<any>;
+    navTitle?: string;
+    subTabs: SubTabConfig[];
+    quickActions: QuickActionConfig[];
+    rightAction?: ReactNode;
+    onRefresh?: () => void;
+    isRefreshing?: boolean;
+}
+export interface DrawerItemConfig {
+    label: string;
+    icon: any;
+    targetTab?: string;
+    targetSubTab?: string;
+    onClick?: () => void;
+}
+export interface UserConfig {
+    name: string;
+    handle: string;
+    avatar: string;
+}
+export interface OnyxMobileLayoutProps {
+    tabs: TabConfig[];
+    user: UserConfig;
+    drawers?: {
+        [key: string]: ComponentType<{
+            isOpen: boolean;
+            onClose: () => void;
+        }>;
+    };
+    onSignOut?: () => void;
+    onRefresh?: () => void;
+    isRefreshing?: boolean;
+    rightAction?: ReactNode;
+    initialTab?: string;
+    drawerItems?: DrawerItemConfig[];
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,64 @@
+{
+    "name": "@kawaiininja/layouts",
+    "version": "1.0.3",
+    "description": "High-performance, premium mobile-first layouts for the Onyx Framework, featuring gesture-driven navigation, radial quick actions, and integrated theme support.",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist",
+        "README.md",
+        "LICENSE"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "keywords": [
+        "onyx",
+        "layouts",
+        "react",
+        "mobile-ui",
+        "gestures",
+        "framer-motion",
+        "premium-design"
+    ],
+    "author": "Vinay",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/kawaiininja/onyx-framework.git",
+        "directory": "layouts"
+    },
+    "bugs": {
+        "url": "https://github.com/kawaiininja/onyx-framework/issues"
+    },
+    "homepage": "https://github.com/kawaiininja/onyx-framework#readme",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.js",
+            "default": "./dist/index.js"
+        }
+    },
+    "scripts": {
+        "build": "tsc",
+        "clean": "if exist dist rmdir /s /q dist",
+        "prepublishOnly": "npm run clean && npm run build"
+    },
+    "peerDependencies": {
+        "framer-motion": ">=10.0.0",
+        "lucide-react": ">=0.284.0",
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "framer-motion": "latest",
+        "lucide-react": "latest",
+        "react": "latest",
+        "react-dom": "latest",
+        "typescript": "^5.0.0"
+    }
+}