@kawaiininja/layouts 3.0.0 → 3.0.1

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kawaiininja/layouts",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "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.",