@kawaiininja/layouts 1.2.0 → 2.1.0

package/dist/PcLayout.js

@@ -16,10 +16,10 @@ 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, }) => {
+const QuickMenu = ({ visible, items, positionY, selectedIndex, onSelect, onMouseEnter, onMouseLeave, }) => {
     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: {
+    return (_jsxs("aside", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, 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)",
@@ -143,6 +143,26 @@ const OnyxPcLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh, isRe
         selectedIndex: -1,
         tabId: "",
     });
+    const closeTimer = useRef(null);
+    const handleMouseEnter = (tab, e) => {
+        if (tab.quickActions?.length > 0) {
+            if (closeTimer.current)
+                clearTimeout(closeTimer.current);
+            const rect = e.currentTarget.getBoundingClientRect();
+            setQuickMenu({
+                visible: true,
+                items: tab.quickActions,
+                positionY: rect.top + rect.height / 2,
+                selectedIndex: -1,
+                tabId: tab.id,
+            });
+        }
+    };
+    const handleMouseLeave = () => {
+        closeTimer.current = setTimeout(() => {
+            setQuickMenu((p) => ({ ...p, visible: false }));
+        }, 300);
+    };
     const sidebarWidth = isSidebarOpen ? 260 : 0;
     // Sync subtab if tab changes
     useEffect(() => {
@@ -240,19 +260,11 @@ const OnyxPcLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh, isRe
         }
         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: `
+    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-8xl 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) => 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 }), 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; }
       ` })] }));

package/dist/asset-store/AssetStore.d.ts

@@ -0,0 +1,2 @@
+import { AssetStoreProps } from "./types";
+export declare function AssetStore({ config, onPurchase, onDownload, onSupport, onLike, onSearch, isLoggedIn, userCredits, search: externalSearch, onLoadMore, hasMore, isLoading, }: AssetStoreProps): import("react/jsx-runtime").JSX.Element;

package/dist/asset-store/AssetStore.js

@@ -0,0 +1,334 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertTriangle, ArrowLeft, BookOpen, Check, ChevronRight, Code, Copy, CreditCard, Download, Gavel, Hash, Heart, Info, Layers, Loader2, Moon, Package, Pause, Play, Search, Shield, Sun, Terminal, } from "lucide-react";
+import React, { useEffect, useMemo, useState } from "react";
+const SyntaxHighlighter = ({ code }) => {
+    const highlight = (text) => {
+        let html = text
+            .replace(/&/g, "&")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;");
+        const tokens = [
+            {
+                name: "comment",
+                regex: /\/\/.*|\/\*[\s\S]*?\*\//,
+                color: "text-muted italic",
+            },
+            {
+                name: "string",
+                regex: /"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`/,
+                color: "text-success",
+            },
+            {
+                name: "entity",
+                regex: /&amp;|&lt;|&gt;|&quot;|&apos;/,
+                color: "text-accent",
+            },
+            {
+                name: "keyword",
+                regex: /\b(?:import|from|export|default|function|return|const|let|var|if|else|for|while|try|catch|new|class|extends|await|async)\b/,
+                color: "text-accent font-bold",
+            },
+            {
+                name: "number",
+                regex: /\b\d+(?:\.\d+)?\b/,
+                color: "text-info",
+            },
+            {
+                name: "component",
+                regex: /\b[A-Z][a-zA-Z0-9]*\b/,
+                color: "text-secondary font-semibold",
+            },
+            {
+                name: "function",
+                regex: /\b[a-z0-9_]+(?=\s*\()/,
+                color: "text-info font-medium",
+            },
+            {
+                name: "attr",
+                regex: /\b[a-z-]+(?==)/i,
+                color: "text-accent/80 italic",
+            },
+            {
+                name: "punct",
+                regex: /[{}()\[\];,.=+\-*/!%&|<>?:]/,
+                color: "text-muted",
+            },
+            {
+                name: "ident",
+                regex: /\b[a-z_][a-z0-9_]*\b/i,
+                color: "text-primary",
+            },
+        ];
+        const masterRegex = new RegExp(tokens.map((t) => `(${t.regex.source})`).join("|"), "g");
+        return html.replace(masterRegex, (match, ...args) => {
+            for (let i = 0; i < tokens.length; i++) {
+                if (args[i] !== undefined && args[i] === match) {
+                    return `<span class="${tokens[i].color}">${match}</span>`;
+                }
+            }
+            return match;
+        });
+    };
+    const htmlContent = highlight(code);
+    return (_jsxs("div", { className: "bg-elevated rounded-xl p-6 border border-subtle shadow-inner overflow-hidden", children: [_jsxs("div", { className: "flex gap-1.5 mb-6 opacity-30", children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-error" }), _jsx("div", { className: "w-2 h-2 rounded-full bg-warning" }), _jsx("div", { className: "w-2 h-2 rounded-full bg-success" })] }), _jsx("pre", { className: "font-mono text-sm leading-relaxed overflow-x-auto whitespace-pre selection:bg-accent/20 custom-scrollbar", dangerouslySetInnerHTML: { __html: htmlContent } })] }));
+};
+const Badge = ({ children, variant = "default" }) => {
+    const styles = {
+        default: "text-muted",
+        paid: "text-warning",
+        free: "text-success",
+        accent: "text-accent",
+        indigo: "text-accent",
+    };
+    return (_jsx("span", { className: `text-[10px] font-bold uppercase tracking-widest ${styles[variant] || styles.default}`, children: children }));
+};
+const AssetCardSkeleton = () => (_jsxs("div", { className: "flex flex-col md:flex-row gap-10 items-start animate-pulse", children: [_jsx("div", { className: "shrink-0 w-full md:w-64 aspect-[16/10] bg-surface rounded-xl border border-subtle opacity-50" }), _jsxs("div", { className: "flex-1 w-full py-1 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-4 w-16 bg-surface rounded opacity-60" }), _jsx("div", { className: "h-4 w-8 bg-surface rounded opacity-30" })] }), _jsx("div", { className: "h-5 w-16 bg-surface rounded-full opacity-60" })] }), _jsx("div", { className: "h-7 w-3/4 bg-surface rounded opacity-80" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-3 w-full bg-surface rounded opacity-50" }), _jsx("div", { className: "h-3 w-2/3 bg-surface rounded opacity-50" })] }), _jsxs("div", { className: "flex items-center justify-between pt-4", children: [_jsx("div", { className: "h-3 w-24 bg-surface rounded opacity-30" }), _jsx("div", { className: "h-8 w-24 bg-surface rounded-lg opacity-60" })] })] })] }));
+export function AssetStore({ config, onPurchase, onDownload, onSupport, onLike, onSearch, isLoggedIn = false, userCredits = 0, search: externalSearch, onLoadMore, hasMore = false, isLoading = false, }) {
+    const [view, setView] = useState({
+        type: "home",
+        id: null,
+    });
+    const [copied, setCopied] = useState(false);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isAudioPlaying, setIsAudioPlaying] = useState(false);
+    const videoRef = React.useRef(null);
+    const audioRef = React.useRef(null);
+    const detailScrollRef = React.useRef(null);
+    const handleScroll = (e) => {
+        const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+        if (scrollHeight - scrollTop <= clientHeight + 100) {
+            if (hasMore && onLoadMore) {
+                onLoadMore();
+            }
+        }
+    };
+    const toggleVideo = () => {
+        if (videoRef.current) {
+            if (isPlaying) {
+                videoRef.current.pause();
+            }
+            else {
+                videoRef.current.play();
+            }
+            setIsPlaying(!isPlaying);
+        }
+    };
+    const toggleAudio = () => {
+        if (audioRef.current) {
+            if (isAudioPlaying) {
+                audioRef.current.pause();
+            }
+            else {
+                audioRef.current.play();
+            }
+            setIsAudioPlaying(!isAudioPlaying);
+        }
+    };
+    const [internalSearch, setInternalSearch] = useState("");
+    const search = externalSearch !== undefined ? externalSearch : internalSearch;
+    const handleSearchChange = (value) => {
+        if (externalSearch === undefined) {
+            setInternalSearch(value);
+        }
+        onSearch?.(value);
+    };
+    const [isDark, setIsDark] = useState(true);
+    const [wishlist, setWishlist] = useState([]);
+    const toggleWishlist = (e, id) => {
+        if (e)
+            e.stopPropagation();
+        const item = (config.products || []).find((p) => p.id === id);
+        if (item)
+            onLike?.(item);
+        setWishlist((prev) => prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]);
+    };
+    const filteredItems = useMemo(() => {
+        return (config.products || []).filter((item) => item.name.toLowerCase().includes(search.toLowerCase()));
+    }, [config.products, search]);
+    const activeItem = useMemo(() => (config.products || []).find((i) => i.id === view.id), [config.products, view.id]);
+    useEffect(() => {
+        if (view.type === "detail" && detailScrollRef.current) {
+            detailScrollRef.current.scrollTop = 0;
+        }
+    }, [view.type, view.id]);
+    useEffect(() => {
+        if (view.type === "detail" && activeItem) {
+            const authorName = activeItem.author?.name || "onyx";
+            const authorSlug = authorName
+                .toLowerCase()
+                .replace(/[^a-z0-9]+/g, "-")
+                .replace(/^-+|-+$/g, "");
+            const productSlug = activeItem.id;
+            const newUrl = new URL(window.location.href);
+            newUrl.searchParams.set("product", `@${authorSlug}/${productSlug}`);
+            window.history.pushState({}, "", newUrl.toString());
+        }
+        else if (view.type === "home") {
+            const newUrl = new URL(window.location.href);
+            newUrl.searchParams.delete("product");
+            window.history.pushState({}, "", newUrl.toString());
+        }
+    }, [view, activeItem]);
+    const renderContent = (content) => {
+        const processText = (text) => {
+            // Regex for Bold (**), Italic (*), Code (`), Link ([...](...))
+            const combinedRegex = /(\*\*[^*]+\*\*)|(\*[^*]+\*)|(`[^`]+`)|(\[([^\]]+)\]\((https?:\/\/[^)]+)\))/g;
+            const parts = [];
+            let lastIndex = 0;
+            let match;
+            while ((match = combinedRegex.exec(text)) !== null) {
+                if (match.index > lastIndex) {
+                    parts.push(text.substring(lastIndex, match.index));
+                }
+                const fullMatch = match[0];
+                // Bold (**text**)
+                if (fullMatch.startsWith("**")) {
+                    parts.push(_jsx("strong", { className: "font-bold text-primary", children: fullMatch.slice(2, -2) }, match.index));
+                }
+                // Italic (*text*)
+                else if (fullMatch.startsWith("*")) {
+                    parts.push(_jsx("em", { className: "italic text-secondary", children: fullMatch.slice(1, -1) }, match.index));
+                }
+                // Inline Code (`text`)
+                else if (fullMatch.startsWith("`")) {
+                    parts.push(_jsx("code", { className: "font-mono text-xs bg-surface border border-subtle px-1.5 py-0.5 rounded text-accent font-bold", children: fullMatch.slice(1, -1) }, match.index));
+                }
+                // Link ([label](url))
+                else if (fullMatch.startsWith("[")) {
+                    const label = match[5];
+                    const url = match[6];
+                    parts.push(_jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "text-accent underline decoration-accent/30 underline-offset-4 hover:decoration-accent transition-all font-medium", children: label }, match.index));
+                }
+                lastIndex = combinedRegex.lastIndex;
+            }
+            if (lastIndex < text.length) {
+                parts.push(text.substring(lastIndex));
+            }
+            return parts.length > 0 ? parts : text;
+        };
+        const lines = Array.isArray(content) ? content : content.split("\n");
+        return lines.map((line, i) => {
+            const trimmed = line.trim();
+            // Blockquote (> text)
+            if (trimmed.startsWith(">")) {
+                return (_jsx("blockquote", { className: "border-l-4 border-accent pl-4 py-1 my-2 italic text-muted bg-surface/50 rounded-r-lg", children: processText(trimmed.substring(1).trim()) }, i));
+            }
+            // Bullet points (+, -, *)
+            if (/^[\+\-\*]\s/.test(trimmed)) {
+                return (_jsxs("div", { className: "flex items-start gap-2 my-1 pl-4", children: [_jsx("span", { className: "text-accent font-bold mt-1.5 w-1.5 h-1.5 rounded-full bg-current shrink-0" }), _jsx("span", { children: processText(trimmed.substring(2).trim()) })] }, i));
+            }
+            return (_jsx("div", { className: "mb-1", children: processText(line) }, i));
+        });
+    };
+    const toggleTheme = () => setIsDark(!isDark);
+    const ThemeToggleBtn = () => (_jsx("button", { onClick: toggleTheme, className: "p-2.5 rounded-xl hover:bg-surface text-secondary transition-all active:scale-95 border border-subtle shadow-sm", title: isDark ? "Switch to Light Mode" : "Switch to Dark Mode", children: isDark ? _jsx(Sun, { size: 18 }) : _jsx(Moon, { size: 18 }) }));
+    return (_jsxs("div", { className: "h-screen-ui flex flex-col font-sans overflow-hidden", "data-theme": isDark ? "dark" : "light", children: [_jsx("div", { className: "flex-1 flex flex-col bg-main text-primary transition-colors duration-normal overflow-hidden selection:bg-accent/20", children: view.type === "detail" && activeItem ? (_jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [_jsxs("nav", { className: "shrink-0 px-8 py-6 flex items-center justify-between border-b border-subtle bg-surface/50 backdrop-blur-md z-header", children: [_jsxs("button", { onClick: () => setView({ type: "home", id: null }), className: "flex items-center gap-2 text-xs font-bold text-secondary hover:text-accent transition-colors", children: [_jsx(ArrowLeft, { size: 16 }), " Library Overview"] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(ThemeToggleBtn, {}), _jsx("button", { onClick: () => onSupport?.(activeItem), className: "hidden md:block px-5 py-2 border border-subtle bg-surface text-secondary hover:text-primary rounded-lg text-xs font-bold transition-all active:scale-95", children: "Enterprise Support" }), _jsx("button", { onClick: () => activeItem.pricing?.type === "paid"
+                                                ? onPurchase?.(activeItem)
+                                                : onDownload?.(activeItem), className: "hidden md:block px-6 py-2 bg-accent text-primary rounded-lg text-xs font-bold transition-all hover:brightness-110 active:scale-95 shadow-glow", children: !isLoggedIn
+                                                ? "Login to Access"
+                                                : activeItem.pricing?.type === "paid"
+                                                    ? "Buy"
+                                                    : activeItem.pricing?.credits
+                                                        ? `Use ${activeItem.pricing.credits} Credits`
+                                                        : "Download" })] })] }), _jsx("main", { ref: detailScrollRef, className: "flex-1 overflow-y-auto custom-scrollbar scroll-smooth", children: _jsx("div", { className: "max-w-[1600px] mx-auto px-8 md:px-16 py-20 w-full", children: _jsxs("div", { className: "flex flex-col xl:flex-row gap-24 relative", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("header", { className: "mb-20", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-6", children: [_jsx("span", { className: "text-accent text-[10px] font-bold uppercase tracking-[0.2em]", children: "PROTOCOL" }), _jsx(ChevronRight, { size: 10, className: "text-muted" }), _jsx("span", { className: "text-muted text-[10px] font-bold uppercase tracking-[0.2em]", children: activeItem.category }), activeItem.tags?.map((tag) => (_jsxs(React.Fragment, { children: [_jsx(ChevronRight, { size: 10, className: "text-muted" }), _jsxs("span", { className: "text-accent text-[10px] font-bold uppercase tracking-[0.2em] bg-accent/5 px-2 py-0.5 rounded", children: ["#", tag] })] }, tag)))] }), _jsx("h1", { className: "text-4xl lg:text-6xl font-extrabold tracking-tight mb-8 leading-[1.1] uppercase italic transition-colors text-primary", children: activeItem.name }), activeItem.author && (_jsxs("div", { className: "flex items-center gap-3 mb-8", children: [_jsx("img", { src: activeItem.author.avatar, alt: activeItem.author.name, className: "w-8 h-8 rounded-full border border-subtle object-cover" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-[10px] uppercase tracking-widest text-muted font-bold", children: "Created By" }), _jsx("span", { className: "text-sm font-bold text-primary", children: activeItem.author.name })] })] })), activeItem.type === "audio" && activeItem.previewUrl ? (_jsxs("div", { className: "mb-12 relative group isolation-auto rounded-3xl", children: [activeItem.image && (_jsxs(_Fragment, { children: [_jsx("div", { className: `absolute inset-0 bg-cover bg-center blur-3xl transition-all duration-[3000ms] ease-in-out ${isAudioPlaying
+                                                                                ? "opacity-80 scale-125 saturate-150"
+                                                                                : "opacity-30 scale-100 saturate-50"}`, style: {
+                                                                                backgroundImage: `url(${activeItem.image})`,
+                                                                            } }), _jsx("div", { className: `absolute inset-0 bg-cover bg-center blur-2xl mix-blend-overlay transition-all duration-700 ${isAudioPlaying
+                                                                                ? "animate-pulse opacity-90 scale-110"
+                                                                                : "opacity-0 scale-95"}`, style: {
+                                                                                backgroundImage: `url(${activeItem.image})`,
+                                                                                animationDuration: "3s",
+                                                                            } }), _jsx("div", { className: `absolute inset-0 bg-cover bg-center blur-xl mix-blend-screen transition-all duration-300 ${isAudioPlaying
+                                                                                ? "animate-pulse opacity-60 scale-105"
+                                                                                : "opacity-0 scale-90"}`, style: {
+                                                                                backgroundImage: `url(${activeItem.image})`,
+                                                                                animationDuration: "1.5s",
+                                                                            } })] })), _jsxs("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: [activeItem.image && (_jsx("div", { className: "absolute inset-0 w-full h-full object-cover opacity-30 mix-blend-overlay", children: _jsx("img", { src: activeItem.image, className: "w-full h-full object-cover" }) })), _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: [activeItem.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: activeItem.image, alt: "Album Art", className: "w-full h-full rounded-full object-cover border-4 border-surface/50" }), _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: [_jsxs("div", { children: [_jsx("h3", { className: "text-2xl font-black text-white mb-2 tracking-tight drop-shadow-md", children: activeItem.name }), _jsx("p", { className: "text-xs text-white/60 uppercase tracking-[0.2em] font-bold", children: "High Fidelity Audio Preview" })] }), _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: activeItem.previewUrl, onContextMenu: (e) => e.preventDefault(), onEnded: () => setIsAudioPlaying(false), className: "hidden" })] })] })] })] })) : (activeItem.type === "video" ||
+                                                            activeItem.type === "app" ||
+                                                            activeItem.type === "software") &&
+                                                            activeItem.previewUrl ? (_jsxs("div", { className: "mb-12 relative group isolation-auto", children: [_jsx("div", { className: "absolute inset-0 bg-cover bg-center blur-3xl opacity-50 scale-110 transition-opacity duration-700", style: {
+                                                                        backgroundImage: `url(${activeItem.image})`,
+                                                                    } }), _jsxs("div", { className: "relative rounded-3xl overflow-hidden border border-subtle aspect-video bg-black shadow-2xl", children: [_jsx("video", { ref: videoRef, src: activeItem.previewUrl, className: "w-full h-full object-cover", poster: activeItem.image, onEnded: () => setIsPlaying(false), onContextMenu: (e) => e.preventDefault() }), _jsx("button", { onClick: toggleVideo, className: "absolute inset-0 flex items-center justify-center bg-black/20 hover:bg-black/10 transition-colors group z-20", children: _jsx("div", { className: `w-20 h-20 rounded-full bg-surface/20 backdrop-blur-md flex items-center justify-center border border-white/20 transition-all transform ${isPlaying
+                                                                                    ? "scale-90 opacity-0 group-hover:opacity-100"
+                                                                                    : "scale-100 opacity-100 hover:scale-110"}`, children: isPlaying ? (_jsx(Pause, { size: 32, className: "text-white fill-white" })) : (_jsx(Play, { size: 32, className: "text-white fill-white ml-2" })) }) })] })] })) : activeItem.images && activeItem.images.length > 0 ? (_jsxs("div", { className: "mb-12 space-y-4", children: [_jsx("div", { className: "rounded-3xl overflow-hidden border border-subtle aspect-video bg-tertiary", children: _jsx("img", { src: activeItem.images[0], id: "gallery-main", alt: activeItem.name, className: "w-full h-full object-cover" }) }), _jsx("div", { className: "flex gap-4 overflow-x-auto pb-2 scrollbar-none", children: activeItem.images.map((img, idx) => (_jsx("button", { onClick: () => {
+                                                                            const mainEl = document.getElementById("gallery-main");
+                                                                            if (mainEl)
+                                                                                mainEl.src = img;
+                                                                        }, className: "shrink-0 w-32 aspect-video rounded-xl overflow-hidden border border-subtle hover:border-accent transition-all active:scale-95", children: _jsx("img", { src: img, className: "w-full h-full object-cover", alt: `${activeItem.name} preview ${idx}` }, idx) }, idx))) })] })) : (activeItem.image && (_jsx("div", { className: "mb-12 rounded-3xl overflow-hidden border border-subtle aspect-video bg-tertiary", children: _jsx("img", { src: activeItem.image, alt: activeItem.name, className: "w-full h-full object-cover" }) }))), _jsx("div", { className: "text-xl font-light leading-relaxed max-w-3xl transition-colors text-secondary", children: activeItem.description }), _jsxs("div", { className: "mt-12 flex items-center gap-10 py-6 border-y transition-colors border-subtle", children: [activeItem.type === "code" && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-[9px] font-bold text-muted uppercase tracking-[0.2em]", children: "Version" }), _jsxs("span", { className: "text-sm font-bold transition-colors text-primary", children: ["v", activeItem.version] })] }), _jsx("div", { className: "w-[1px] h-8 transition-colors bg-subtle" })] })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-[9px] font-bold text-muted uppercase tracking-[0.2em]", children: "Last Update" }), _jsx("span", { className: "text-sm font-bold transition-colors text-primary", children: activeItem.updated })] }), activeItem.type === "code" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-[1px] h-8 transition-colors bg-subtle" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-[9px] font-bold text-muted uppercase tracking-[0.2em]", children: "Framework" }), _jsx("span", { className: "text-sm font-bold transition-colors text-primary", children: activeItem.framework })] })] }))] })] }), _jsxs("div", { className: "space-y-32", children: [(activeItem.type === "code" ||
+                                                            activeItem.type === "app") &&
+                                                            activeItem.installation && (_jsxs("section", { id: "setup", className: "scroll-mt-32", children: [_jsx("h3", { className: "text-[10px] font-bold text-muted uppercase tracking-[0.2em] mb-8 flex items-center gap-2", children: activeItem.installation.npm ? (_jsxs(_Fragment, { children: [_jsx(Terminal, { size: 14, className: "text-accent" }), " ", "Installation Command"] })) : (_jsxs(_Fragment, { children: [_jsx(Download, { size: 14, className: "text-accent" }), " ", "Downloads"] })) }), activeItem.installation.npm && (_jsxs("div", { className: "bg-elevated rounded-xl p-5 font-mono text-sm border border-subtle flex justify-between items-center group transition-colors shadow-sm mb-4", children: [_jsx("code", { className: "text-accent font-bold", children: activeItem.installation.npm }), copied ? (_jsx(Check, { size: 16, className: "text-success animate-bounce" })) : (_jsx("button", { onPointerDown: () => {
+                                                                                navigator.clipboard.writeText(activeItem.installation.npm);
+                                                                                setCopied(true);
+                                                                                setTimeout(() => setCopied(false), 2000);
+                                                                            }, className: "p-1 hover:bg-surface rounded transition-colors touch-manipulation", children: _jsx(Copy, { size: 16, className: "text-muted opacity-40 group-hover:opacity-100 cursor-pointer transition-opacity" }) }))] })), activeItem.installation.downloads && (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: activeItem.installation.downloads.map((download, i) => (_jsxs("a", { href: download.url, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-4 bg-tertiary hover:bg-surface border border-subtle rounded-xl p-4 transition-all group", children: [_jsx("div", { className: "p-2 bg-main rounded-lg text-accent", children: _jsx(Download, { size: 20 }) }), _jsxs("div", { children: [_jsx("div", { className: "font-bold capitalize", children: download.platform }), _jsx("div", { className: "text-xs text-muted", children: "Direct Download" })] })] }, i))) }))] })), activeItem.type === "code" && activeItem.usage && (_jsxs("section", { id: "usage", className: "scroll-mt-32", children: [_jsxs("h3", { className: "text-[10px] font-bold text-muted uppercase tracking-[0.2em] mb-8 flex items-center gap-2", children: [_jsx(Code, { size: 14, className: "text-accent" }), " ", "Implementation Steps"] }), activeItem.usage.steps ? (_jsx("div", { className: "space-y-10", children: activeItem.usage.steps.map((step, idx) => (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "flex items-center justify-center w-6 h-6 rounded-full bg-accent/10 text-accent text-[10px] font-bold border border-accent/20 shadow-glow shadow-accent/20", children: idx + 1 }), _jsx("h4", { className: "text-sm font-bold text-primary tracking-tight", children: step.title })] }), _jsx(SyntaxHighlighter, { code: step.code })] }, idx))) })) : (_jsx(SyntaxHighlighter, { code: activeItem.usage.example }))] })), activeItem.guide && (_jsxs("section", { id: "docs", className: "space-y-20 scroll-mt-32", children: [_jsx("h3", { className: "text-[10px] font-bold text-muted uppercase tracking-[0.2em] mb-12 flex items-center gap-2", children: activeItem.type !== "code" ? (_jsxs(_Fragment, { children: [_jsx(Info, { size: 14, className: "text-accent" }), " Asset Specifications"] })) : (_jsxs(_Fragment, { children: [_jsx(BookOpen, { size: 14, className: "text-accent" }), " ", "Technical Guide & Documentation"] })) }), _jsx("div", { className: "flex flex-col gap-20", children: activeItem.guide.map((g, i) => {
+                                                                        return (_jsxs("article", { id: `sec-${i}`, className: "group scroll-mt-32", children: [_jsxs("div", { className: "flex items-center gap-4 mb-6", children: [_jsxs("span", { className: "text-[10px] font-bold px-2.5 py-1 rounded tracking-widest uppercase transition-all group-hover:scale-110 bg-tertiary text-accent", children: ["SEC ", String(i + 1).padStart(2, "0")] }), _jsxs("h2", { className: "text-2xl font-bold flex items-center gap-2 transition-colors group-hover:text-accent text-primary", children: [g.title, _jsx(Hash, { size: 18, className: "opacity-0 group-hover:opacity-100 transition-all translate-x-[-10px] group-hover:translate-x-0 text-muted/30" })] })] }), _jsxs("div", { className: "leading-relaxed text-lg font-light transition-colors text-secondary space-y-4", children: [_jsx("div", { children: renderContent(g.detail) }), g.example && (_jsxs("div", { className: "mt-6", children: [_jsx("h5", { className: "text-[10px] font-bold text-muted uppercase tracking-widest mb-3", children: "Usage Example" }), _jsx(SyntaxHighlighter, { code: g.example })] }))] })] }, i));
+                                                                    }) })] })), activeItem.type === "code" && activeItem.props && (_jsxs("section", { id: "api", className: "scroll-mt-32", children: [_jsxs("h3", { className: "text-[10px] font-bold text-muted uppercase tracking-[0.2em] mb-8 flex items-center gap-2", children: [_jsx(Layers, { size: 14, className: "text-accent" }), " API Reference"] }), _jsx("div", { className: "border border-subtle rounded-xl overflow-hidden bg-surface shadow-sm", children: _jsxs("table", { className: "w-full text-left text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-tertiary text-muted font-bold border-b border-subtle", children: [_jsx("th", { className: "px-6 py-5", children: "Property" }), _jsx("th", { className: "px-6 py-5", children: "Type Definition" }), _jsx("th", { className: "px-6 py-5", children: "Initial State" }), _jsx("th", { className: "px-6 py-5", children: "Description" })] }) }), _jsx("tbody", { className: "divide-y divide-subtle", children: activeItem.props.map((p, i) => (_jsxs("tr", { className: "hover:bg-tertiary/50 transition-colors", children: [_jsx("td", { className: "px-6 py-5 font-mono text-accent text-xs font-bold", children: p.name }), _jsx("td", { className: "px-6 py-5 text-secondary", children: Array.isArray(p.type) ? (_jsx("div", { className: "flex flex-wrap gap-1", children: p.type.map((t, k) => (_jsx("code", { className: "text-[10px] px-1.5 py-0.5 rounded border border-subtle bg-surface text-secondary font-bold font-mono", children: t }, k))) })) : (_jsx("code", { className: "text-xs font-mono text-secondary", children: p.type })) }), _jsx("td", { className: "px-6 py-5 text-muted font-mono text-xs", children: p.default }), _jsx("td", { className: "px-6 py-5 text-secondary text-xs leading-relaxed max-w-xs", children: p.description || "-" })] }, i))) })] }) })] })), (activeItem.type === "app" ||
+                                                            activeItem.type === "software") && (_jsxs("section", { id: "meta", className: "grid grid-cols-1 md:grid-cols-3 gap-6 scroll-mt-32", children: [activeItem.size && (_jsxs("div", { className: "bg-elevated rounded-xl p-5 border border-subtle h-full", children: [_jsx("h4", { className: "text-[10px] font-bold text-muted uppercase tracking-[0.2em] mb-2", children: "Size" }), _jsx("p", { className: "text-primary font-bold text-lg", children: activeItem.size })] })), activeItem.requirements && (_jsxs("div", { className: "bg-elevated rounded-xl p-5 border border-subtle h-full", children: [_jsx("h4", { className: "text-[10px] font-bold text-muted uppercase tracking-[0.2em] mb-2", children: "Requirements" }), _jsx("p", { className: "text-primary font-bold text-lg", children: activeItem.requirements })] })), activeItem.languages && (_jsxs("div", { className: "bg-elevated rounded-xl p-5 border border-subtle h-full", children: [_jsx("h4", { className: "text-[10px] font-bold text-muted uppercase tracking-[0.2em] mb-3", children: "Languages" }), _jsx("div", { className: "flex flex-wrap gap-2", children: activeItem.languages.map((lang, i) => (_jsx("span", { className: "text-[10px] font-bold px-2 py-1 bg-surface border border-subtle rounded text-secondary uppercase tracking-wider", children: lang }, i))) })] }))] })), activeItem.protectionPolicy && (_jsxs("section", { id: "policy", className: "scroll-mt-32", children: [_jsxs("h3", { className: "text-[10px] font-bold text-muted uppercase tracking-[0.2em] mb-12 flex items-center gap-2", children: [_jsx(Shield, { size: 14, className: activeItem.protectionPolicy.isStrict
+                                                                                ? "text-error"
+                                                                                : "text-accent" }), " ", "Policy & Rights"] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx(AlertTriangle, { size: 18, className: activeItem.protectionPolicy.isStrict
+                                                                                        ? "text-error/60"
+                                                                                        : "text-muted" }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-sm font-bold text-primary", children: activeItem.protectionPolicy.isStrict
+                                                                                                ? "Strict Intellectual Property Enforcement"
+                                                                                                : "Ownership & Usage Rights" }), _jsx("div", { className: "text-secondary text-sm leading-relaxed font-light", children: renderContent(activeItem.protectionPolicy.text) })] })] }), activeItem.protectionPolicy.isStrict && (_jsxs("div", { className: "flex items-center gap-2 text-[10px] font-bold text-error uppercase tracking-widest pl-8 opacity-80", children: [_jsx(Gavel, { size: 12 }), " Legal Action initiated upon violation"] }))] })] })), _jsxs("section", { className: "pt-20 pb-40 border-t border-subtle text-center", children: [_jsx("h3", { className: "text-[10px] font-bold text-muted uppercase tracking-[0.4em] mb-12", children: "Production Ready Modules" }), _jsxs("button", { onClick: () => activeItem.pricing?.type === "paid"
+                                                                        ? onPurchase?.(activeItem)
+                                                                        : onDownload?.(activeItem), className: "group relative px-12 py-6 bg-accent text-primary rounded-2xl text-lg font-black uppercase tracking-[0.2em] transition-all hover:brightness-110 active:scale-95 shadow-[0_0_50px_-12px_rgba(var(--color-accent),0.5)] shadow-glow flex items-center gap-4 mx-auto overflow-hidden", children: [_jsx("span", { className: "relative z-10 transition-transform duration-300 group-hover:-translate-x-1", children: !isLoggedIn
+                                                                                ? "Login to Access"
+                                                                                : activeItem.pricing?.type === "paid"
+                                                                                    ? `Purchase ${activeItem.name}`
+                                                                                    : activeItem.pricing?.credits
+                                                                                        ? `Use ${activeItem.pricing.credits} Credits`
+                                                                                        : activeItem.type === "code"
+                                                                                            ? "Download Source"
+                                                                                            : activeItem.type === "app" ||
+                                                                                                activeItem.type === "software"
+                                                                                                ? "Download App"
+                                                                                                : "Download Original Asset" }), activeItem.pricing.type === "paid" ? (_jsx(CreditCard, { size: 22, className: "relative z-10 transition-all duration-300 opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0" })) : (_jsx(Download, { size: 22, className: "relative z-10 transition-all duration-300 opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0" }))] }), _jsxs("p", { className: "mt-8 text-xs text-muted font-medium", children: ["Includes ", activeItem.license?.name || "MIT License", " & Lifetime Updates"] })] })] })] }), _jsxs("aside", { className: "hidden xl:block w-72 sticky top-0 self-start pt-4 h-fit", children: [_jsx("h4", { className: "text-[10px] font-bold text-muted uppercase tracking-widest mb-8 px-1", children: activeItem.type !== "code"
+                                                        ? "Asset Info"
+                                                        : "On this page" }), _jsx("nav", { className: "space-y-6", children: (activeItem.type === "code" || activeItem.type === "app"
+                                                        ? [
+                                                            { id: "setup", title: "Installation" },
+                                                            ...(activeItem.usage
+                                                                ? [{ id: "usage", title: "Implementation" }]
+                                                                : []),
+                                                            { id: "docs", title: "Documentation" },
+                                                            { id: "api", title: "API Reference" },
+                                                            ...(activeItem.protectionPolicy
+                                                                ? [{ id: "policy", title: "Policy" }]
+                                                                : []),
+                                                        ]
+                                                        : [
+                                                            { id: "docs", title: "Overview" },
+                                                            ...(activeItem.protectionPolicy
+                                                                ? [{ id: "policy", title: "Policy" }]
+                                                                : []),
+                                                        ]).map((section) => (_jsx("a", { href: `#${section.id}`, className: "block text-[11px] font-bold uppercase tracking-[0.2em] truncate border-l-2 border-transparent pl-4 transition-all hover:border-accent hover:text-accent text-muted", children: section.title }, section.id))) })] })] }) }) })] })) : (_jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [_jsxs("header", { className: "shrink-0 px-8 md:px-16 py-12 border-b border-subtle flex flex-col md:flex-row md:items-center justify-between gap-10 bg-surface/30 backdrop-blur-sm z-header", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("h1", { className: "text-3xl font-bold tracking-tight", children: [config.title, " ", _jsx("span", { className: "text-accent", children: config.accentTitle })] }), _jsx("p", { className: "text-sm text-secondary font-medium", children: config.description })] }), _jsxs("div", { className: "flex items-center gap-6", children: [_jsxs("div", { className: "relative w-full max-w-xs group", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted group-focus-within:text-accent transition-colors", size: 18 }), _jsx("input", { type: "text", placeholder: "Search library...", className: "w-full pl-10 pr-4 py-3 bg-tertiary border border-subtle rounded-xl focus:border-accent focus:ring-1 focus:ring-accent outline-none text-sm transition-all text-primary", value: search, onChange: (e) => handleSearchChange(e.target.value) })] }), _jsx(ThemeToggleBtn, {})] })] }), _jsx("main", { className: "flex-1 overflow-y-auto p-8 md:p-16 custom-scrollbar", onScroll: handleScroll, children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs("div", { className: "flex flex-col gap-16", children: [isLoading &&
+                                                Array.from({ length: 3 }).map((_, i) => (_jsx(AssetCardSkeleton, {}, i))), !isLoading &&
+                                                filteredItems.map((item) => (_jsxs("div", { onClick: () => setView({ type: "detail", id: item.id }), className: "group cursor-pointer flex flex-col md:flex-row gap-10 items-start transition-all", children: [_jsxs("div", { className: "shrink-0 w-full md: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", children: [_jsx("button", { onClick: (e) => toggleWishlist(e, item.id), className: `absolute top-3 right-3 p-2 rounded-lg backdrop-blur-md transition-all active:scale-90 z-10 ${wishlist.includes(item.id)
+                                                                        ? "bg-accent/20 text-accent"
+                                                                        : "bg-main/50 text-muted hover:text-accent opacity-0 group-hover:opacity-100"}`, children: _jsx(Heart, { size: 14, fill: wishlist.includes(item.id)
+                                                                            ? "currentColor"
+                                                                            : "none" }) }), item.images && item.images.length > 0 ? (_jsx("img", { src: item.images[0], alt: item.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" })) : item.image ? (_jsx("img", { src: item.image, alt: item.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" })) : (_jsx(Package, { size: 40, className: "text-muted group-hover:text-accent transition-all duration-normal" }))] }), _jsxs("div", { className: "flex-1 py-1", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Badge, { variant: "accent", children: item.category }), item.type === "code" && (_jsxs("span", { className: "text-muted text-[10px] uppercase tracking-widest font-bold opacity-50", children: ["v", item.version] }))] }), _jsx(Badge, { variant: item.pricing?.type === "paid" ? "paid" : "free", children: item.pricing?.type === "paid"
+                                                                                ? `$${item.pricing.price}`
+                                                                                : item.pricing?.credits
+                                                                                    ? `${item.pricing.credits} CR`
+                                                                                    : "FREE" })] }), _jsx("h3", { className: "text-2xl font-bold mb-3 group-hover:text-accent transition-colors", children: item.name }), _jsx("p", { className: "text-secondary leading-relaxed mb-6 line-clamp-2", children: item.description }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2 text-[10px] font-bold text-muted uppercase tracking-[0.2em] transition-colors group-hover:text-primary", children: ["Explore Asset", " ", _jsx(ChevronRight, { size: 14, className: "group-hover:translate-x-1 transition-transform" })] }), _jsx("button", { onClick: (e) => {
+                                                                                e.stopPropagation();
+                                                                                if (item.pricing.type === "paid") {
+                                                                                    onPurchase?.(item);
+                                                                                }
+                                                                                else {
+                                                                                    onDownload?.(item);
+                                                                                }
+                                                                            }, className: "px-6 py-2.5 bg-accent text-primary rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all hover:brightness-110 active:scale-95 shadow-glow", children: item.pricing.type === "paid"
+                                                                                ? "Buy Pro"
+                                                                                : "Get Free" })] })] })] }, item.id)))] }), hasMore && (_jsx("div", { className: "flex justify-center py-12", children: _jsx(Loader2, { className: "animate-spin text-accent", size: 32 }) })), filteredItems.length === 0 && (_jsxs("div", { className: "text-center py-32", children: [_jsx("div", { className: "inline-flex items-center justify-center w-20 h-20 rounded-full bg-tertiary mb-6", children: _jsx(Search, { size: 32, className: "text-muted" }) }), _jsxs("p", { className: "text-secondary font-medium", children: ["No assets found matching \"", search, "\""] })] }))] }) })] })) }), _jsx("style", { children: `
+        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
+        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--color-border)); border-radius: 20px; }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-accent)); }
+        [data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; }
+      ` })] }));
+}

package/dist/asset-store/index.d.ts

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

package/dist/asset-store/index.js

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

package/dist/asset-store/types.d.ts

@@ -0,0 +1,83 @@
+export interface AssetProduct {
+    id: string;
+    name: string;
+    version: string;
+    category: string;
+    framework: string;
+    description: string;
+    type?: "code" | "image" | "audio" | "video" | "book" | "app" | "software";
+    previewUrl?: string;
+    tags?: string[];
+    pricing: {
+        type: "free" | "paid";
+        price?: number;
+        currency?: string;
+        credits?: number;
+    };
+    installation?: {
+        npm?: string;
+        npx?: string;
+        downloads?: {
+            platform: "windows" | "mac" | "linux" | "android" | "ios";
+            url: string;
+        }[];
+    };
+    usage?: {
+        import: string;
+        example: string;
+        steps?: {
+            title: string;
+            code: string;
+        }[];
+    };
+    props?: {
+        name: string;
+        type: string | string[];
+        default: string;
+        description?: string;
+    }[];
+    license: {
+        type: string;
+        name: string;
+    };
+    updated: string;
+    guide?: {
+        title: string;
+        detail: string | string[];
+        example?: string;
+    }[];
+    image?: string;
+    images?: string[];
+    author?: {
+        name: string;
+        avatar: string;
+    };
+    legalNotice?: string;
+    protectionPolicy?: {
+        isStrict: boolean;
+        text: string;
+    };
+    size?: string;
+    requirements?: string;
+    languages?: string[];
+}
+export interface AssetStoreConfig {
+    title: string;
+    accentTitle: string;
+    description: string;
+    products: AssetProduct[];
+}
+export interface AssetStoreProps {
+    config: AssetStoreConfig;
+    isLoggedIn?: boolean;
+    userCredits?: number;
+    onPurchase?: (product: AssetProduct) => void;
+    onDownload?: (product: AssetProduct) => void;
+    onSupport?: (product: AssetProduct) => void;
+    onLike?: (product: AssetProduct) => void;
+    onSearch?: (query: string) => void;
+    search?: string;
+    onLoadMore?: () => void;
+    hasMore?: boolean;
+    isLoading?: boolean;
+}

package/dist/asset-store/types.js

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

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export * from "./asset-store/AssetStore";
+export * from "./asset-store/types";
 export * from "./MobileLayout";
 export * from "./PcLayout";
 export * from "./ResponsiveLayout";

package/dist/index.js

@@ -1,3 +1,5 @@
+export * from "./asset-store/AssetStore";
+export * from "./asset-store/types";
 export * from "./MobileLayout";
 export * from "./PcLayout";
 export * from "./ResponsiveLayout";

package/package.json

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