@kawaiininja/layouts 1.0.13 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @kawaiininja/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.
+High-performance, premium responsive layouts for the Onyx Framework. Designed with a focus on fluid gestures, adaptive sidebar navigation, and state-of-the-art aesthetics that switch seamlessly between Mobile and PC.
 
 [**📖 Read the Full Developer Guide**](./GUIDE.md) | [**🎨 Explore Examples**](./examples/)
 
@@ -8,7 +8,13 @@ High-performance, premium mobile-first layouts for the Onyx Framework. Designed
 
 ## ✨ Features
 
-### 🖐️ Gesture-Driven Navigation (Fluid Flow)
+### 💻 Responsive Engine (Adaptive Mode)
+
+- **Layout Swapping**: Automatically switches between `OnyxMobileLayout` and `OnyxPcLayout` at the 1024px breakpoint.
+- **Adaptive Navigation**: Mobile uses a bottom rail and popup drawer; PC uses a fixed sidebar and hover-based quick menus.
+- **Single Config**: Define your navigation once—the framework handles the physics and layout changes for all screen sizes.
+
+### 🖐️ Gesture & Mouse Interactions
 
 - **Horizontal Tab Swiping**: Seamlessly transition between sub-tabs with natural swipe gestures. Built on a custom gesture engine for zero-lag response.
 - **Vertical Pull-to-Refresh**: Granular refresh logic at the global, tab, or individual sub-tab level with integrated spring physics and haptic feedback support.
@@ -51,10 +57,10 @@ Note: This package requires `framer-motion`, `lucide-react`, and `react` >= 18.0
 
 ## 📦 Usage
 
-### Integrated with React Router
+### Integrated Routing Support (Responsive)
 
 ```jsx
-import { OnyxMobileLayout } from "@kawaiininja/layouts";
+import { OnyxResponsiveLayout } from "@kawaiininja/layouts";
 import { BrowserRouter, useNavigate, useLocation } from "react-router-dom";
 import { Home, Grid, PenTool } from "lucide-react";
 
@@ -92,19 +98,12 @@ const App = () => {
 
   const [isRefreshing, setIsRefreshing] = useState(false);
 
-  const handleRefresh = async () => {
-    setIsRefreshing(true);
-    await fetchMyData(); // Framework handles the 12s safety timeout automatically
-    setIsRefreshing(false);
-  };
-
   return (
-    <OnyxMobileLayout
+    <OnyxResponsiveLayout
       tabs={tabs}
       user={{ name: "Alex", handle: "@alex", avatar: "..." }}
       activeTab={activeTabId}
       onNavigate={(path) => navigate(path)}
-      onRefresh={handleRefresh}
       isRefreshing={isRefreshing}
       drawers={{
         editor: MyEditorPanel,
@@ -156,10 +155,35 @@ If your view components are **Lazy Loaded** (using `React.lazy`), you **must** w
 
 ```jsx
 <Suspense fallback={<MyLoader />}>
-  <OnyxMobileLayout ... />
+  <OnyxResponsiveLayout ... />
 </Suspense>
 ```
 
+### 4. Sidemenu Deep-Linking (Global Navigation)
+
+The sidebar (PC) and Drawer (Mobile) can navigate to specific tabs and sub-tabs using the `drawerItems` prop. This is the preferred way to create a "Global Menu" that crosses category boundaries.
+
+```javascript
+const drawerItems = [
+  {
+    label: "Inventory Hub",
+    icon: Activity,
+    targetTab: "search", // The ID of the parent tab
+    targetSubTab: "Inventory", // The Label of the specific sub-tab
+  },
+  {
+    label: "Account Settings",
+    icon: User,
+    targetTab: "settings", // Defaults to first sub-tab of settings
+  },
+];
+
+// ... inside render
+<OnyxResponsiveLayout tabs={tabs} drawerItems={drawerItems} />;
+```
+
+The framework will automatically calculate the correct path from your `TabConfig` and trigger `onNavigate`.
+
 ---
 
 ## 🔄 Data Refresh & Safety
@@ -193,23 +217,11 @@ To prevent your UI from getting "stuck" due to forgotten state updates or hangin
 
 ---
 
-## 🛠️ Configuration API
-
-### 4. Capacitor & Safe Areas
-
-The header and side rail automatically handle notches and status bars using `env(safe-area-inset-*)`. For the best native experience, ensure your app container uses the dynamic viewport height:
-
-```css
-.app-container {
-  height: 100dvh; /* Prevents layout shifting on mobile */
-}
-```
-
----
+### 🛠️ Configuration API
 
-## 🛠️ Configuration API
+### `OnyxMobileLayoutProps` & `OnyxPcLayoutProps`
 
-### `OnyxMobileLayoutProps`
+Both versions of the layout use almost identical properties. For automatic detection, use `OnyxResponsiveLayout`.
 
 | Prop           | Type                          | Description                                                   |
 | :------------- | :---------------------------- | :------------------------------------------------------------ |

package/dist/MobileLayout.d.ts

@@ -1,6 +1,2 @@
-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

@@ -1,36 +1,8 @@
 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;
-};
+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
@@ -306,10 +278,9 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
                         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;
+        const zoom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--ui-zoom") || "1");
+        startX.current = e.touches[0].clientX / zoom;
+        startY.current = e.touches[0].clientY / zoom;
         dragXRef.current = isOpen ? DRAWER_WIDTH : 0;
         setRenderDragX(dragXRef.current);
         isGesturing.current = true;
@@ -320,8 +291,9 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
     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;
+        const zoom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--ui-zoom") || "1");
+        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) {
@@ -425,9 +397,8 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
     }, [isRefreshing]);
     // Quick Menu Logic
     const handleNavTouchStart = (e, tab) => {
-        if (isDraggingMenu.current)
-            return;
-        const y = e.touches[0].clientY;
+        const zoom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--ui-zoom") || "1");
+        const y = e.touches[0].clientY / zoom;
         startYRef.current = y;
         holdTimer.current = setTimeout(() => {
             isDraggingMenu.current = true;
@@ -443,7 +414,8 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
         }, 400);
     };
     const handleNavTouchMove = (e) => {
-        const y = e.touches[0].clientY;
+        const zoom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--ui-zoom") || "1");
+        const y = e.touches[0].clientY / zoom;
         const diff = y - startYRef.current;
         if (!isDraggingMenu.current) {
             if (Math.abs(diff) > 10)
@@ -478,8 +450,9 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
     };
     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 safe-top safe-bottom", style: {
-            height: "100dvh",
+    return (_jsxs("div", { className: "bg-[rgb(var(--bg-main))] overflow-hidden relative safe-top safe-bottom", style: {
+            height: "calc(100dvh / var(--ui-zoom, 1))",
+            width: "calc(100vw / var(--ui-zoom, 1))",
         }, 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`,

package/dist/PcLayout.d.ts

@@ -0,0 +1,2 @@
+import { OnyxPcLayoutProps } from "./types";
+export declare const OnyxPcLayout: (props: OnyxPcLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/PcLayout.js

@@ -0,0 +1,260 @@
+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, onMouseEnter, onMouseLeave, }) => (_jsxs("button", { ref: onRegisterRef, type: "button", role: "tab", "aria-label": title, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, 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 group focus:outline-none ${active
+        ? "text-[rgb(var(--color-accent))]"
+        : "text-[rgb(var(--text-secondary))] hover:text-[rgb(var(--text-primary))]"}`, children: [_jsx("span", { className: `text-[10px] 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 group-hover:opacity-100"}`, 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 group-hover:opacity-100"}` }))] }));
+const RailNavThemeToggle = () => {
+    const { isDark, toggleTheme } = useTheme();
+    return (_jsx("button", { onClick: toggleTheme, className: "mt-auto mb-6 mx-auto p-3 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", title: isDark ? "Switch to Light Mode" : "Switch to Dark Mode", 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, onSelect, }) => {
+    if (!visible || !items || items.length === 0)
+        return null;
+    return (_jsxs("aside", { className: "fixed right-20 z-[100] min-w-[200px] 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", { onClick: () => onSelect?.(idx), 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-[1.02] shadow-lg"
+                    : "text-[rgb(var(--text-secondary))] hover:bg-[rgb(var(--bg-tertiary))] hover:text-[rgb(var(--text-primary))]"}`, 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))]/80 backdrop-blur-xl border-b border-[rgb(var(--color-border-subtle))] px-6 h-16 flex justify-between items-center select-none", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("button", { onClick: onMenuClick, className: "p-2 rounded-lg text-[rgb(var(--text-secondary))] hover:text-[rgb(var(--text-primary))] hover:bg-[rgb(var(--bg-tertiary))] transition-colors", children: _jsx(Menu, { size: 20 }) }), _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-6 gap-8 overflow-x-auto no-scrollbar", children: tabs.map((tab) => (_jsxs("button", { onClick: () => onChange(tab.label), className: `relative py-4 flex items-center gap-2 text-sm font-medium transition-all hover:text-[rgb(var(--text-primary))] 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 = 16; // Adjusted for PC
+        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 OnyxPcLayoutBase = ({ 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("[OnyxPcLayout] Critical Error: 'tabs' prop is required and must be a non-empty array.");
+    }
+    if (!user) {
+        throw new Error("[OnyxPcLayout] Critical Error: 'user' prop is required to display profile information.");
+    }
+    const [internalActiveTab, setInternalActiveTab] = useState(initialTab);
+    const activeTab = externalActiveTab || internalActiveTab;
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [activeDrawer, setActiveDrawer] = useState(null);
+    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 [quickMenu, setQuickMenu] = useState({
+        visible: false,
+        items: [],
+        positionY: 0,
+        selectedIndex: -1,
+        tabId: "",
+    });
+    const sidebarWidth = isSidebarOpen ? 260 : 0;
+    // Sync subtab if tab changes
+    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",
+    });
+    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",
+        });
+    }
+    else if (subTab !== motionData.sub) {
+        const subLabels = subTabs.map((st) => st.label);
+        const prevIdx = subLabels.indexOf(motionData.sub);
+        const nextIdx = subLabels.indexOf(subTab);
+        if (prevIdx !== -1 && nextIdx !== -1) {
+            setMotionData({
+                tab: activeTab,
+                sub: subTab,
+                dir: nextIdx > prevIdx ? 1 : -1,
+                type: "subtab",
+            });
+        }
+        else {
+            setMotionData({ ...motionData, sub: subTab, dir: 0 });
+        }
+    }
+    const variants = {
+        enter: (d) => ({
+            x: d.type === "subtab" ? (d.dir > 0 ? 40 : -40) : 0,
+            y: d.type === "tab" ? (d.dir > 0 ? 100 : -100) : 0,
+            opacity: 0,
+            scale: 0.98,
+        }),
+        center: {
+            x: 0,
+            y: 0,
+            opacity: 1,
+            scale: 1,
+            transition: {
+                duration: 0.4,
+                ease: [0.16, 1, 0.3, 1],
+            },
+        },
+        exit: (d) => ({
+            x: d.type === "subtab" ? (d.dir > 0 ? -40 : 40) : 0,
+            y: d.type === "tab" ? (d.dir > 0 ? -100 : 100) : 0,
+            opacity: 0,
+            scale: 1.02,
+            transition: { duration: 0.3, ease: [0.16, 1, 0.3, 1] },
+        }),
+    };
+    const Sidebar = () => (_jsxs("aside", { className: "h-full bg-[rgb(var(--bg-surface))] border-r border-[rgb(var(--color-border-subtle))] flex flex-col z-30 transition-all duration-300 ease-in-out relative", style: {
+            width: `${sidebarWidth}px`,
+            opacity: isSidebarOpen ? 1 : 0,
+            pointerEvents: isSidebarOpen ? "auto" : "none",
+        }, children: [_jsxs("div", { className: "p-8 flex flex-col items-center text-center", children: [_jsxs("div", { className: "relative group cursor-pointer mb-4", children: [_jsx("div", { className: "w-20 h-20 rounded-full bg-gradient-to-tr from-[rgb(var(--color-secondary))] to-[rgb(var(--color-accent))] p-1 transition-transform group-hover:scale-105", children: _jsx("img", { src: user.avatar, className: "w-full h-full rounded-full object-cover border-4 border-[rgb(var(--bg-surface))]" }) }), _jsx("div", { className: "absolute -bottom-1 -right-1 w-6 h-6 bg-[rgb(var(--color-success))] border-4 border-[rgb(var(--bg-surface))] rounded-full" })] }), _jsx("h2", { className: "text-lg font-bold text-[rgb(var(--text-primary))]", children: user.name }), _jsx("p", { className: "text-sm text-[rgb(var(--text-muted))]", children: user.handle })] }), _jsx("div", { className: "flex-1 px-4 space-y-1 overflow-y-auto no-scrollbar", 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: () => {
+                        navigateTo(item.targetTab, item.targetSubTab);
+                        if (item.onClick)
+                            item.onClick({
+                                openDrawer: (id) => setActiveDrawer(id),
+                            });
+                    }, className: "w-full flex items-center gap-3 px-4 py-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: 18, className: "group-hover:scale-110 transition-transform" }), _jsx("span", { className: "text-sm", children: item.label })] }, item.label))) }), _jsx("div", { className: "p-4 mt-auto border-t border-[rgb(var(--color-border-subtle))]", children: _jsxs("button", { onClick: onSignOut, className: "flex items-center gap-3 text-[rgb(var(--status-error))] font-medium px-4 py-3 w-full hover:bg-[rgb(var(--bg-tertiary))] rounded-xl transition-colors", children: [_jsx(LogOut, { size: 18 }), _jsx("span", { className: "text-sm", children: "Sign Out" })] }) })] }));
+    const handleNavClick = (tabId) => {
+        navigateTo(tabId);
+        setQuickMenu((p) => ({ ...p, visible: false }));
+    };
+    const handleQuickAction = (idx) => {
+        const item = quickMenu.items[idx];
+        if (item?.onClick) {
+            item.onClick({
+                openDrawer: (id) => setActiveDrawer(id),
+            });
+        }
+        setQuickMenu((p) => ({ ...p, visible: false }));
+    };
+    return (_jsxs("div", { className: "bg-[rgb(var(--bg-main))] flex h-screen w-full overflow-hidden text-[rgb(var(--text-primary))]", children: [_jsx(Sidebar, {}), _jsxs("div", { className: "flex-1 flex flex-col min-w-0 relative bg-[rgb(var(--bg-main))]", children: [_jsx(Header, { title: currentTabConfig?.navTitle || currentTabConfig?.label || "App", onMenuClick: () => setIsSidebarOpen(!isSidebarOpen), rightAction: currentTabConfig?.rightAction || rightAction }), _jsx(HorizontalTabs, { tabs: subTabs, active: subTab, onChange: (label) => navigateTo(undefined, label) }), _jsxs("main", { className: "flex-1 overflow-y-auto no-scrollbar relative min-h-0", children: [isRefreshing && (_jsx("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 z-10 p-2 bg-[rgb(var(--bg-surface))] rounded-full shadow-xl border border-[rgb(var(--color-border-subtle))] animate-spin text-[rgb(var(--color-accent))]", children: _jsx(Loader2, { size: 18 }) })), _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", children: _jsx("div", { className: "p-6 md:p-8 max-w-7xl mx-auto", children: subTabs.find((st) => st.label === subTab)?.view &&
+                                            React.createElement(subTabs.find((st) => st.label === subTab).view, { onOpenDrawer: setActiveDrawer }) }) }, `${activeTab}-${subTab}`) })] })] }), _jsxs("nav", { className: "w-16 bg-[rgb(var(--bg-surface))] 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: () => handleNavClick(tab.id), onMouseEnter: (e) => {
+                                    if (tab.quickActions?.length > 0) {
+                                        const rect = e.currentTarget.getBoundingClientRect();
+                                        setQuickMenu({
+                                            visible: true,
+                                            items: tab.quickActions,
+                                            positionY: rect.top + rect.height / 2,
+                                            selectedIndex: -1,
+                                            tabId: tab.id,
+                                        });
+                                    }
+                                }, onRegisterRef: (el) => registerButtonRef(idx, el) }, tab.id)))] }), _jsx(RailNavThemeToggle, {})] }), quickMenu.visible && (_jsx("div", { className: "fixed inset-0 z-[90]", onClick: () => setQuickMenu((p) => ({ ...p, visible: false })) })), _jsx(QuickMenu, { ...quickMenu, onSelect: handleQuickAction }), Object.entries(drawers || {}).map(([key, DrawerComp]) => (_jsx(DrawerComp, { isOpen: activeDrawer === key, onClose: () => setActiveDrawer(null) }, key))), _jsx("style", { children: `
+        .no-scrollbar::-webkit-scrollbar { display: none; }
+        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+      ` })] }));
+};
+export const OnyxPcLayout = (props) => (_jsx(ThemeProvider, { children: _jsx(OnyxPcLayoutBase, { ...props }) }));

package/dist/ResponsiveLayout.d.ts

@@ -0,0 +1,2 @@
+import { OnyxPcLayoutProps } from "./types";
+export declare const OnyxResponsiveLayout: (props: OnyxPcLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ResponsiveLayout.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { OnyxMobileLayout } from "./MobileLayout";
+import { OnyxPcLayout } from "./PcLayout";
+export const OnyxResponsiveLayout = (props) => {
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        const checkMobile = () => {
+            // 1024px is a common breakpoint for tablets/desktops (LG in Tailwind)
+            setIsMobile(window.innerWidth < 1024);
+        };
+        // Initial check
+        checkMobile();
+        window.addEventListener("resize", checkMobile);
+        return () => window.removeEventListener("resize", checkMobile);
+    }, []);
+    if (isMobile) {
+        return _jsx(OnyxMobileLayout, { ...props });
+    }
+    return _jsx(OnyxPcLayout, { ...props });
+};

package/dist/ThemeContext.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export declare const ThemeContext: React.Context<{
+    isDark: boolean;
+    toggleTheme: () => void;
+} | null>;
+export declare const ThemeProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => {
+    isDark: boolean;
+    toggleTheme: () => void;
+};

package/dist/ThemeContext.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+export 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 }));
+};
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context)
+        throw new Error("useTheme must be used within a ThemeProvider");
+    return context;
+};

package/dist/index.d.ts

@@ -1,2 +1,5 @@
 export * from "./MobileLayout";
+export * from "./PcLayout";
+export * from "./ResponsiveLayout";
+export * from "./ThemeContext";
 export * from "./types";

package/dist/index.js

@@ -1,2 +1,5 @@
 export * from "./MobileLayout";
+export * from "./PcLayout";
+export * from "./ResponsiveLayout";
+export * from "./ThemeContext";
 export * from "./types";

package/dist/types.d.ts

@@ -59,3 +59,5 @@ export interface OnyxMobileLayoutProps {
     onNavigate?: (path: string) => void;
     drawerItems?: DrawerItemConfig[];
 }
+export interface OnyxPcLayoutProps extends OnyxMobileLayoutProps {
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kawaiininja/layouts",
-    "version": "1.0.13",
+    "version": "1.2.0",
     "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",
@@ -22,7 +22,7 @@
         "framer-motion",
         "premium-design"
     ],
-    "author": "Vinay",
+    "author": "Tristan",
     "license": "MIT",
     "repository": {
         "type": "git",