@kawaiininja/layouts 3.0.0 → 3.1.0

package/README.md

@@ -184,6 +184,36 @@ const drawerItems = [
 
 The framework will automatically calculate the correct path from your `TabConfig` and trigger `onNavigate`.
 
+### 5. Triggering Drawers from Views
+
+Every component rendered inside a sub-tab `view` automatically receives the `openDrawer` prop (and its alias `onOpenDrawer`). This allows you to trigger your registered drawers from any button or interaction within your content.
+
+**New**: You can now pass a data object as the second argument. This data will be passed as props to the drawer component.
+
+```jsx
+// Inside a component used as a sub-tab 'view'
+const MyFeedView = ({ openDrawer }) => {
+  return (
+    <div className="p-6">
+      <h1>Welcome to the Feed</h1>
+      {/* Pass custom data to the drawer */}
+      <button onClick={() => openDrawer("editor", { initialTitle: "Hello World" })}>
+        Compose New Post
+      </button>
+    </div>
+  );
+};
+
+// The Drawer component then receives it as props
+const MyEditorDrawer = ({ initialTitle, isOpen, onClose }) => {
+  return (
+    <AdaptiveDrawer isOpen={isOpen} onClose={onClose} title="New Post">
+      <input defaultValue={initialTitle} />
+    </AdaptiveDrawer>
+  );
+};
+```
+
 ---
 
 ## 🔄 Data Refresh & Safety

package/dist/MobileLayout.js

@@ -317,12 +317,13 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
                                                         .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) => {
+                                                    }) }) }, `${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((item, index) => {
+                const { id, data } = item;
                 const DrawerComp = drawers[id];
                 if (!DrawerComp)
                     return null;
                 const isTop = index === drawerStack.length - 1;
-                return (_jsx(DrawerComp, { isOpen: isTop, onClose: () => {
+                return (_jsx(DrawerComp, { isOpen: isTop, ...(data || {}), onClose: () => {
                         if (isTop) {
                             console.log("[OnyxMobileLayout] Drawer onClose Event:", id);
                             handleBackDrawer();

package/dist/PcLayout.js

@@ -106,12 +106,13 @@ const OnyxPcLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh, isRe
                                             }) }) }, `${activeTab}-${activeSubTab}`) })] })] }), _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) => handleMouseEnter(tab, e), onMouseLeave: handleMouseLeave, onRegisterRef: (el) => registerButtonRef(idx, el) }, tab.id)))] }), _jsx(RailNavThemeToggle, {})] }), _jsx(QuickMenu, { ...quickMenu, onSelect: handleQuickAction, onMouseEnter: () => {
                     if (closeTimer.current)
                         clearTimeout(closeTimer.current);
-                }, onMouseLeave: handleMouseLeave }), drawerStack.map((id, index) => {
+                }, onMouseLeave: handleMouseLeave }), drawerStack.map((item, index) => {
+                const { id, data } = item;
                 const DrawerComp = drawers[id];
                 if (!DrawerComp)
                     return null;
                 const isTop = index === drawerStack.length - 1;
-                return (_jsx(DrawerComp, { isOpen: isTop, onClose: () => {
+                return (_jsx(DrawerComp, { isOpen: isTop, ...(data || {}), onClose: () => {
                         if (isTop)
                             handleBackDrawer();
                     }, onBack: () => {

package/dist/hooks/useDrawerStack.d.ts

@@ -1,12 +1,16 @@
+export interface DrawerStackItem {
+    id: string;
+    data?: any;
+}
 /**
  * useDrawerStack
  * Manages a stack of drawers for nested navigation.
  */
 export declare function useDrawerStack(): {
-    drawerStack: string[];
+    drawerStack: DrawerStackItem[];
     activeDrawer: string | null;
-    handleOpenDrawer: (id: string) => void;
+    handleOpenDrawer: (id: string, data?: any) => void;
     handleBackDrawer: () => void;
     handleCloseDrawers: () => void;
-    setDrawerStack: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    setDrawerStack: import("react").Dispatch<import("react").SetStateAction<DrawerStackItem[]>>;
 };

package/dist/hooks/useDrawerStack.js

@@ -5,27 +5,22 @@ import { useCallback, useMemo, useState } from "react";
  */
 export function useDrawerStack() {
     const [drawerStack, setDrawerStack] = useState([]);
-    const activeDrawer = useMemo(() => drawerStack[drawerStack.length - 1] || null, [drawerStack]);
-    const handleOpenDrawer = useCallback((id) => {
-        console.log("[useDrawerStack] Opening Drawer:", id);
+    const activeDrawer = useMemo(() => drawerStack[drawerStack.length - 1]?.id || null, [drawerStack]);
+    const handleOpenDrawer = useCallback((id, data) => {
+        console.log("[useDrawerStack] Opening Drawer:", id, "with data:", data);
         setDrawerStack((prev) => {
-            console.log("[useDrawerStack] Current Stack before push:", prev);
-            // Don't push if it's already the top drawer
-            if (prev[prev.length - 1] === id) {
-                console.log("[useDrawerStack] Drawer already at top, skipping push:", id);
+            // Don't push if it's already the top drawer with same data (optional check)
+            if (prev[prev.length - 1]?.id === id &&
+                prev[prev.length - 1]?.data === data) {
                 return prev;
             }
-            const next = [...prev, id];
-            console.log("[useDrawerStack] New Stack after push:", next);
-            return next;
+            return [...prev, { id, data }];
         });
     }, []);
     const handleBackDrawer = useCallback(() => {
-        console.log("[useDrawerStack] Popping Stack");
         setDrawerStack((prev) => (prev.length > 0 ? prev.slice(0, -1) : prev));
     }, []);
     const handleCloseDrawers = useCallback(() => {
-        console.log("[useDrawerStack] Clearing Stack");
         setDrawerStack([]);
     }, []);
     return {

package/dist/library/LibraryHome.js

@@ -70,7 +70,11 @@ export const LibraryHome = ({ config, search, isLoading, hasMore, filteredItems,
                                                             : item.preview })) : (_jsx(Package, { size: 20, className: "text-muted group-hover:text-accent" })) }), _jsxs("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-3 py-1.5 bg-accent text-primary text-[10px] font-bold uppercase tracking-widest rounded-lg opacity-0 group-hover:opacity-100 animate-float pointer-events-none whitespace-nowrap z-50 shadow-lg shadow-accent/20", children: [item.name, _jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-accent" })] })] }, item.id))) })) : ["Wallpapers", "Marketing", "Motion & Media"].includes(activeCategory) ? (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", children: (activeSubCategory
                                             ? displayedItems.filter((i) => (i.subCategory || "General") ===
                                                 activeSubCategory)
-                                            : displayedItems).map((item) => (_jsxs("div", { onClick: () => onSelect(item.id), onMouseEnter: (e) => e.currentTarget.querySelector("video")?.play(), onMouseLeave: (e) => {
+                                            : displayedItems).map((item) => (_jsxs("div", { onClick: () => onSelect(item.id), onMouseEnter: (e) => {
+                                                const video = e.currentTarget.querySelector("video");
+                                                if (video)
+                                                    video.play().catch(() => { });
+                                            }, onMouseLeave: (e) => {
                                                 const v = e.currentTarget.querySelector("video");
                                                 if (v) {
                                                     v.pause();
@@ -90,7 +94,11 @@ export const LibraryHome = ({ config, search, isLoading, hasMore, filteredItems,
                                                             : "none" }) })] }, item.id))) })) : (_jsx("div", { className: "flex flex-col gap-16", children: (activeSubCategory
                                             ? displayedItems.filter((i) => (i.subCategory || "General") ===
                                                 activeSubCategory)
-                                            : displayedItems).map((item) => (_jsxs("div", { onClick: () => onSelect(item.id), className: "group cursor-pointer flex flex-col lg:flex-row gap-10 items-start transition-all", children: [_jsxs("div", { className: "shrink-0 w-full lg:w-64 aspect-[16/10] relative flex items-center justify-center transition-all bg-tertiary rounded-xl group-hover:bg-accent/5 border border-subtle group-hover:border-accent/30 overflow-hidden", onMouseEnter: (e) => e.currentTarget.querySelector("video")?.play(), onMouseLeave: (e) => {
+                                            : displayedItems).map((item) => (_jsxs("div", { onClick: () => onSelect(item.id), className: "group cursor-pointer flex flex-col lg:flex-row gap-10 items-start transition-all", children: [_jsxs("div", { className: "shrink-0 w-full lg:w-64 aspect-[16/10] relative flex items-center justify-center transition-all bg-tertiary rounded-xl group-hover:bg-accent/5 border border-subtle group-hover:border-accent/30 overflow-hidden", onMouseEnter: (e) => {
+                                                        const video = e.currentTarget.querySelector("video");
+                                                        if (video)
+                                                            video.play().catch(() => { });
+                                                    }, onMouseLeave: (e) => {
                                                         const v = e.currentTarget.querySelector("video");
                                                         if (v) {
                                                             v.pause();

package/dist/library/MediaPreview.js

@@ -8,19 +8,23 @@ export const MediaPreview = ({ product }) => {
     const audioRef = useRef(null);
     const toggleVideo = () => {
         if (videoRef.current) {
-            if (isPlaying)
+            if (isPlaying) {
                 videoRef.current.pause();
-            else
-                videoRef.current.play();
+            }
+            else {
+                videoRef.current.play().catch(() => { });
+            }
             setIsPlaying(!isPlaying);
         }
     };
     const toggleAudio = () => {
         if (audioRef.current) {
-            if (isAudioPlaying)
+            if (isAudioPlaying) {
                 audioRef.current.pause();
-            else
-                audioRef.current.play();
+            }
+            else {
+                audioRef.current.play().catch(() => { });
+            }
             setIsAudioPlaying(!isAudioPlaying);
         }
     };
@@ -38,6 +42,7 @@ export const MediaPreview = ({ product }) => {
                             } })] })), _jsx("div", { className: "relative rounded-3xl overflow-hidden border border-subtle aspect-square md:aspect-video bg-black/40 backdrop-blur-xl flex items-center justify-center shadow-2xl", children: _jsxs("div", { className: "relative z-10 w-full max-w-xs md:max-w-md p-6 md:p-8 bg-surface/30 backdrop-blur-md rounded-3xl border border-white/10 shadow-xl flex flex-col items-center gap-6 md:gap-8 mx-4", children: [product.image && (_jsxs("div", { className: `relative w-40 h-40 rounded-full shadow-[0_0_40px_-5px_rgba(var(--color-accent),0.4)] transition-all duration-700 ${isAudioPlaying ? "animate-[spin_4s_linear_infinite]" : ""}`, children: [_jsx("img", { src: product.image, className: "w-full h-full rounded-full object-cover border-4 border-surface/50", alt: "Album Art" }), _jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-surface/80 rounded-full border border-white/20" })] })), _jsxs("div", { className: "w-full text-center space-y-4", children: [_jsx("h3", { className: "text-2xl font-black text-white mb-2 tracking-tight drop-shadow-md", children: product.name }), _jsx("button", { onClick: toggleAudio, className: "w-16 h-16 rounded-full bg-white text-black flex items-center justify-center mx-auto hover:scale-110 active:scale-95 transition-all shadow-lg shadow-white/20", children: isAudioPlaying ? (_jsx(Pause, { size: 24, className: "fill-black" })) : (_jsx(Play, { size: 24, className: "fill-black ml-1" })) }), _jsx("audio", { ref: audioRef, src: product.previewUrl, onEnded: () => setIsAudioPlaying(false), className: "hidden" })] })] }) })] }));
     }
     if ((product.type === "video" ||
+        product.type === "media" ||
         product.type === "app" ||
         product.type === "software") &&
         product.previewUrl) {

package/dist/library/types.d.ts

@@ -6,7 +6,7 @@ export interface AssetProduct {
     category: string;
     framework: string;
     description: string;
-    type?: "code" | "util" | "image" | "audio" | "video" | "book" | "app" | "software" | "glyph";
+    type?: "code" | "util" | "image" | "audio" | "video" | "media" | "book" | "app" | "software" | "glyph";
     previewUrl?: string;
     preview?: React.ReactNode;
     tags?: string[];

package/dist/types/drawer.d.ts

@@ -4,6 +4,6 @@ export interface DrawerItemConfig {
     targetTab?: string;
     targetSubTab?: string;
     onClick?: (ctx: {
-        openDrawer: (id: string) => void;
+        openDrawer: (id: string, data?: any) => void;
     }) => void;
 }

package/dist/types/layout.d.ts

@@ -6,13 +6,7 @@ export interface OnyxMobileLayoutProps {
     tabs: TabConfig[];
     user: UserConfig;
     drawers?: {
-        [key: string]: ComponentType<{
-            isOpen: boolean;
-            onClose: () => void;
-            onBack?: () => void;
-            onOpenDrawer: (id: string) => void;
-            openDrawer?: (id: string) => void;
-        }>;
+        [key: string]: ComponentType<any>;
     };
     onSignOut?: () => void;
     onRefresh?: () => void | Promise<void>;

package/dist/types/navigation.d.ts

@@ -11,7 +11,7 @@ export interface QuickActionConfig {
     label: string;
     icon: ComponentType<any>;
     onClick?: (ctx: {
-        openDrawer: (id: string) => void;
+        openDrawer: (id: string, data?: any) => void;
     }) => void;
 }
 export interface TabConfig {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kawaiininja/layouts",
-    "version": "3.0.0",
+    "version": "3.1.0",
     "category": "UI Components",
     "framework": "React / Framer Motion",
     "description": "High-performance, premium mobile-first layouts for the Onyx Framework, featuring gesture-driven navigation, radial quick actions, and integrated theme support.",