@microcosmmoney/portal-react 2.3.4 → 3.1.0

package/dist/components/auction/auction-page.js

@@ -6,19 +6,85 @@ exports.MicrocosmAuctionPage = MicrocosmAuctionPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const auth_react_1 = require("@microcosmmoney/auth-react");
-const fmt = (n, d = 2) => n.toLocaleString('en-US', { minimumFractionDigits: d, maximumFractionDigits: d });
-function Spinner() {
-    return (0, jsx_runtime_1.jsx)("span", { className: "inline-block w-5 h-5 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin" });
+/* ─── Inline SVG Icons (lucide style, 24x24) ─── */
+const IconGavel = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "m14 13-7.5 7.5c-.83.83-2.17.83-3 0 0 0 0 0 0 0a2.12 2.12 0 0 1 0-3L11 10" }), (0, jsx_runtime_1.jsx)("path", { d: "m16 16 6-6" }), (0, jsx_runtime_1.jsx)("path", { d: "m8 8 6-6" }), (0, jsx_runtime_1.jsx)("path", { d: "m9 7 8 8" }), (0, jsx_runtime_1.jsx)("path", { d: "m21 11-8-8" })] }));
+const IconFlame = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" }) }));
+const IconCrown = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 21h14" })] }));
+const IconTimer = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("line", { x1: "10", x2: "14", y1: "2", y2: "2" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", x2: "12", y1: "14", y2: "10" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "14", r: "8" })] }));
+const IconShield = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }) }));
+const IconClock = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("polyline", { points: "12 6 12 12 16 14" })] }));
+const IconLock = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }));
+const IconRefresh = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }), (0, jsx_runtime_1.jsx)("path", { d: "M21 3v5h-5" }), (0, jsx_runtime_1.jsx)("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 16H3v5" })] }));
+const IconChevronDown = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "m6 9 6 6 6-6" }) }));
+const IconChevronUp = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "m18 15-6-6-6 6" }) }));
+const IconBarChart = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 3v18h18" }), (0, jsx_runtime_1.jsx)("path", { d: "M13 17V9" }), (0, jsx_runtime_1.jsx)("path", { d: "M18 17V5" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 17v-3" })] }));
+const IconAward = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "8", r: "6" })] }));
+const IconUsers = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "7", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] }));
+const IconZap = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" }) }));
+const IconArrowUpRight = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 7h10v10" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 17 17 7" })] }));
+const IconBuilding = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 22v-4h6v4" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 6h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 6h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 6h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 10h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 14h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 10h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 14h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 10h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 14h.01" })] }));
+const IconGrid = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 9h18" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 15h18" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 3v18" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 3v18" })] }));
+const IconMap = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 5.764v15" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 3.236v15" })] }));
+const IconGlobe = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 12h20" })] }));
+/* ─── Helpers ─── */
+const UNIT_ICONS = {
+    station: (0, jsx_runtime_1.jsx)(IconBuilding, { className: "w-4 h-4" }),
+    matrix: (0, jsx_runtime_1.jsx)(IconGrid, { className: "w-4 h-4" }),
+    sector: (0, jsx_runtime_1.jsx)(IconMap, { className: "w-4 h-4" }),
+    system: (0, jsx_runtime_1.jsx)(IconGlobe, { className: "w-4 h-4" }),
+};
+const UNIT_LABELS = {
+    station: 'Station', matrix: 'Matrix', sector: 'Sector', system: 'System',
+};
+const BADGE_VARIANTS = {
+    success: 'bg-white/20 text-white border border-white/30',
+    warning: 'bg-cyan-400/20 text-cyan-400 border border-cyan-400/30',
+    error: 'bg-red-500/20 text-red-500 border border-red-500/30',
+    info: 'bg-cyan-400/20 text-cyan-400 border border-cyan-400/30',
+    default: 'bg-neutral-500/20 text-neutral-300 border border-neutral-600',
+};
+const BID_STATUS_MAP = {
+    active: { label: 'Leading', variant: 'success' },
+    outbid: { label: 'Outbid', variant: 'warning' },
+    won: { label: 'Won', variant: 'success' },
+    lost: { label: 'Lost', variant: 'error' },
+    refunded: { label: 'Refunded', variant: 'default' },
+};
+function cn(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+function Badge({ className = '', children }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: cn('inline-flex items-center gap-0.5 text-[10px] font-medium px-2 py-0.5 rounded-full whitespace-nowrap', className), children: children }));
+}
+function TimeRemaining({ endTime, className }) {
+    const diff = new Date(endTime).getTime() - Date.now();
+    if (diff <= 0)
+        return (0, jsx_runtime_1.jsx)("span", { className: className, children: "Ended" });
+    const d = Math.floor(diff / 86400000);
+    const h = Math.floor((diff % 86400000) / 3600000);
+    const m = Math.floor((diff % 3600000) / 60000);
+    const parts = [];
+    if (d > 0)
+        parts.push(`${d}d`);
+    parts.push(`${h}h`);
+    parts.push(`${m}m`);
+    return (0, jsx_runtime_1.jsx)("span", { className: className, children: parts.join(' ') });
+}
+function FormattedDateTime({ dateTime, className }) {
+    if (!dateTime)
+        return (0, jsx_runtime_1.jsx)("span", { className: className, children: "-" });
+    const d = new Date(dateTime);
+    return (0, jsx_runtime_1.jsxs)("span", { className: className, children: [d.toLocaleDateString(), " ", d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })] });
 }
 function Modal({ open, onClose, children }) {
     if (!open)
         return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", onClick: onClose, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-black/60" }), (0, jsx_runtime_1.jsx)("div", { className: "relative bg-neutral-900 border border-neutral-700 rounded-lg p-6 max-w-md w-full mx-4 font-mono max-h-[90vh] overflow-y-auto", onClick: e => e.stopPropagation(), children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", onClick: onClose, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-black/60" }), (0, jsx_runtime_1.jsx)("div", { className: "relative bg-neutral-900 border border-neutral-700 rounded-lg max-w-md w-full mx-4 font-mono max-h-[90vh] overflow-y-auto", onClick: e => e.stopPropagation(), children: children })] }));
 }
 function MicrocosmAuctionPage({ basePath = '', onNavigate }) {
-    const { data: auctions, loading, refresh: refreshAuctions } = (0, auth_react_1.useAuctions)();
-    const { data: myBids, refresh: refreshBids } = (0, auth_react_1.useMyBids)();
-    const { data: history } = (0, auth_react_1.useAuctionHistory)();
+    const { data: auctions, loading, refresh: refreshAuctions } = (0, auth_react_1.useAuctions)({ refetchInterval: 30000 });
+    const { data: myBids, refresh: refreshBids } = (0, auth_react_1.useMyBids)({ refetchInterval: 30000 });
+    const { data: history, refresh: refreshHistory } = (0, auth_react_1.useAuctionHistory)();
     const { placeBid, loading: bidLoading } = (0, auth_react_1.useAuctionBid)();
     const [bidDialogOpen, setBidDialogOpen] = (0, react_1.useState)(false);
     const [selectedAuction, setSelectedAuction] = (0, react_1.useState)(null);
@@ -30,41 +96,68 @@ function MicrocosmAuctionPage({ basePath = '', onNavigate }) {
     const auctionList = Array.isArray(auctions) ? auctions : [];
     const bidsList = Array.isArray(myBids) ? myBids : [];
     const historyList = Array.isArray(history) ? history : [];
-    const totalBids = auctionList.reduce((s, a) => s + (a.bid_count ?? 0), 0);
-    const highestBid = auctionList.reduce((m, a) => Math.max(m, a.current_price ?? 0), 0);
+    const stats = (0, react_1.useMemo)(() => {
+        const totalBids = auctionList.reduce((s, a) => s + (a.bid_count || 0), 0);
+        const highestBid = auctionList.length > 0 ? Math.max(...auctionList.map((a) => a.current_price ?? 0)) : 0;
+        const totalVolume = auctionList.reduce((s, a) => s + (a.current_price ?? 0), 0);
+        const myLeading = bidsList.filter((b) => b.status === 'active').length;
+        return { totalBids, highestBid, totalVolume, myLeading };
+    }, [auctionList, bidsList]);
     const handleRefresh = (0, react_1.useCallback)(async () => {
         setRefreshing(true);
-        await Promise.all([refreshAuctions(), refreshBids()]);
+        await Promise.all([refreshAuctions(), refreshBids(), refreshHistory()]);
         setRefreshing(false);
-    }, [refreshAuctions, refreshBids]);
-    const handleBid = async () => {
+    }, [refreshAuctions, refreshBids, refreshHistory]);
+    const openBidDialog = (auction) => {
+        setSelectedAuction(auction);
+        setBidAmount(((auction.current_price ?? 0) + (auction.bid_increment ?? 0)).toString());
+        setBidDialogOpen(true);
+        setActionError(null);
+    };
+    const handlePlaceBid = async () => {
         if (!selectedAuction)
             return;
         const amount = parseFloat(bidAmount);
         if (isNaN(amount) || amount <= 0) {
-            setActionError('Enter a valid amount');
+            setActionError('Enter a valid bid amount');
+            return;
+        }
+        const minBid = (selectedAuction.current_price ?? 0) + (selectedAuction.bid_increment ?? 0);
+        if (amount < minBid) {
+            setActionError(`Minimum bid is ${minBid.toLocaleString()} MCC`);
             return;
         }
         try {
             setActionError(null);
-            await placeBid(selectedAuction.id, amount);
+            await placeBid(selectedAuction.auction_id ?? selectedAuction.id, amount);
             setBidDialogOpen(false);
             setBidAmount('');
+            setSelectedAuction(null);
             handleRefresh();
         }
         catch (err) {
             setActionError(err instanceof Error ? err.message : 'Bid failed');
         }
     };
-    const formatTimeLeft = (endTime) => {
-        if (!endTime)
-            return '-';
-        const diff = new Date(endTime).getTime() - Date.now();
-        if (diff <= 0)
-            return 'Ended';
-        const hours = Math.floor(diff / 3600000);
-        const minutes = Math.floor((diff % 3600000) / 60000);
-        return `${hours}h ${minutes}m`;
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto font-mono space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold text-white", children: "Auctions" }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400 text-sm mt-1", children: "Territory magistrate auctions" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleRefresh, disabled: refreshing, className: "flex items-center gap-2 px-3 py-1.5 text-sm border border-neutral-700 rounded text-neutral-400 hover:bg-neutral-800 disabled:opacity-50 bg-transparent", children: [(0, jsx_runtime_1.jsx)("svg", { className: `w-4 h-4 ${refreshing ? 'animate-spin' : ''}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), "Refresh"] })] }), actionError && ((0, jsx_runtime_1.jsx)("div", { className: "p-3 bg-red-500/10 border border-red-500/30 rounded text-red-400 text-sm", children: actionError })), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "ongoing" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xl font-bold text-cyan-400", children: auctionList.length })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "total_bids" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xl font-bold text-white", children: totalBids })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "highest_bid" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xl font-bold text-cyan-400", children: [fmt(highestBid), " MCC"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "my_bids" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xl font-bold text-white", children: bidsList.length })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-xs font-mono tracking-wider mb-4 block", children: "ACTIVE_AUCTIONS" }), loading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-8", children: (0, jsx_runtime_1.jsx)(Spinner, {}) })) : auctionList.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: auctionList.map((a) => ((0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded border border-neutral-700 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-start mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white font-bold", children: a.unit_name || a.territory_id || `Auction #${a.id}` }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-400 mt-0.5", children: [a.unit_type || 'Station', " \u2022 ", a.bid_count ?? 0, " bids", (a.bid_count ?? 0) >= 5 && (0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400 ml-1", children: "\uD83D\uDD25 Hot" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400", children: "Time Left" }), (0, jsx_runtime_1.jsx)("div", { className: "text-white font-bold", children: formatTimeLeft(a.end_time) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-3 mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-400", children: "starting_price" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm font-bold text-white", children: [fmt(a.starting_price ?? 0), " MCC"] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-400", children: "current_highest" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm font-bold text-cyan-400", children: [fmt(a.current_price ?? a.starting_price ?? 0), " MCC"] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-400", children: "bid_increment" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm font-bold text-white", children: [fmt(a.bid_increment ?? 0), " MCC"] })] })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => { setSelectedAuction(a); setBidDialogOpen(true); setActionError(null); }, className: "w-full py-2 bg-cyan-700 hover:bg-cyan-600 text-white rounded text-sm font-mono", children: "Place Bid" })] }, a.id))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-8 text-neutral-500 font-mono text-sm", children: "no active auctions" }))] }) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-xs font-mono tracking-wider", children: "MY_BIDS" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowMyBids(!showMyBids), className: "text-xs text-neutral-500 hover:text-cyan-400 font-mono", children: showMyBids ? 'Collapse' : 'Expand' })] }), showMyBids && (bidsList.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: bidsList.map((b, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-3 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-white text-sm", children: b.unit_name || `Auction #${b.auction_id}` }), (0, jsx_runtime_1.jsx)("span", { className: `ml-2 text-[10px] px-1.5 py-0.5 rounded ${b.status === 'active' || b.status === 'leading' ? 'bg-cyan-400/20 text-cyan-400' : b.status === 'won' ? 'bg-white/20 text-white' : 'bg-neutral-700 text-neutral-400'}`, children: b.status || 'active' })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white font-bold font-mono", children: [fmt(b.amount ?? 0), " MCC"] })] }, i))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-4 text-neutral-500 font-mono text-sm", children: "no bids placed" })))] }) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-xs font-mono tracking-wider", children: "AUCTION_HISTORY" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowHistory(!showHistory), className: "text-xs text-neutral-500 hover:text-cyan-400 font-mono", children: showHistory ? 'Collapse' : 'Expand' })] }), showHistory && (historyList.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full text-sm", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { className: "text-neutral-400 text-xs border-b border-neutral-700", children: [(0, jsx_runtime_1.jsx)("th", { className: "text-left py-2 font-normal", children: "Territory" }), (0, jsx_runtime_1.jsx)("th", { className: "text-right py-2 font-normal", children: "Final Price" }), (0, jsx_runtime_1.jsx)("th", { className: "text-right py-2 font-normal", children: "Bids" }), (0, jsx_runtime_1.jsx)("th", { className: "text-right py-2 font-normal", children: "Status" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: historyList.map((h, i) => ((0, jsx_runtime_1.jsxs)("tr", { className: "border-b border-neutral-800", children: [(0, jsx_runtime_1.jsx)("td", { className: "py-3 text-white", children: h.unit_name || h.territory_id || '-' }), (0, jsx_runtime_1.jsxs)("td", { className: "py-3 text-right text-cyan-400 font-bold", children: [fmt(h.final_price ?? 0), " MCC"] }), (0, jsx_runtime_1.jsx)("td", { className: "py-3 text-right text-neutral-400", children: h.bid_count ?? 0 }), (0, jsx_runtime_1.jsx)("td", { className: "py-3 text-right", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs bg-neutral-700 text-neutral-300 px-1.5 py-0.5 rounded", children: h.status || 'ended' }) })] }, i))) })] }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-4 text-neutral-500 font-mono text-sm", children: "no auction history" })))] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-xs font-mono tracking-wider mb-4", children: "AUCTION_RULES" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid md:grid-cols-3 gap-4 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white font-bold mb-2", children: "Target" }), (0, jsx_runtime_1.jsxs)("ul", { className: "list-disc list-inside text-neutral-400 space-y-1", children: [(0, jsx_runtime_1.jsx)("li", { children: "Territory magistrate position" }), (0, jsx_runtime_1.jsx)("li", { children: "Station / Matrix / Sector / System" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white font-bold mb-2", children: "Bidding Rules" }), (0, jsx_runtime_1.jsxs)("ul", { className: "list-disc list-inside text-neutral-400 space-y-1", children: [(0, jsx_runtime_1.jsx)("li", { children: "50% deposit required" }), (0, jsx_runtime_1.jsx)("li", { children: "24h no-bid rule ends auction" }), (0, jsx_runtime_1.jsx)("li", { children: "Winner becomes magistrate" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white font-bold mb-2", children: "Requirements" }), (0, jsx_runtime_1.jsxs)("ul", { className: "list-disc list-inside text-neutral-400 space-y-1", children: [(0, jsx_runtime_1.jsx)("li", { children: "Sufficient MCC balance" }), (0, jsx_runtime_1.jsx)("li", { children: "Miner level or above" })] })] })] })] }), (0, jsx_runtime_1.jsx)(Modal, { open: bidDialogOpen, onClose: () => setBidDialogOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-bold text-white", children: "Place Bid" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-neutral-400 mt-1", children: selectedAuction?.unit_name || `Auction #${selectedAuction?.id}` })] }), selectedAuction && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400", children: "Current Highest" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-cyan-400 font-bold", children: [fmt(selectedAuction.current_price ?? selectedAuction.starting_price ?? 0), " MCC"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400", children: "Min Next Bid" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white font-bold", children: [fmt((selectedAuction.current_price ?? selectedAuction.starting_price ?? 0) + (selectedAuction.bid_increment ?? 0)), " MCC"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-xs text-neutral-400 tracking-wider", children: "bid_amount (MCC)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", step: "0.01", value: bidAmount, onChange: e => setBidAmount(e.target.value), placeholder: "Enter bid amount", className: "w-full px-3 py-2 bg-neutral-800 border border-neutral-600 rounded text-white placeholder-neutral-400 outline-none focus:border-cyan-400" })] }), bidAmount && parseFloat(bidAmount) > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-neutral-800 rounded border border-neutral-700 text-xs text-neutral-400", children: ["Deposit required: ", (0, jsx_runtime_1.jsxs)("span", { className: "text-white font-bold", children: [fmt(parseFloat(bidAmount) * 0.5), " MCC"] }), " (50%)"] }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-3 pt-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setBidDialogOpen(false), className: "px-4 py-2 text-sm border border-neutral-700 rounded text-neutral-400 hover:bg-neutral-800 bg-transparent", children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleBid, disabled: bidLoading || !bidAmount, className: "px-4 py-2 text-sm bg-cyan-700 hover:bg-cyan-600 text-white rounded disabled:opacity-50", children: bidLoading ? 'Processing...' : 'Confirm Bid' })] })] }) })] }));
+    if (loading)
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-[60vh]", children: (0, jsx_runtime_1.jsx)("span", { className: "inline-block w-8 h-8 border-2 border-neutral-400 border-t-transparent rounded-full animate-spin" }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto p-6 space-y-6 font-mono", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold text-white tracking-wider", children: "Territory Auctions" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-neutral-400", children: "Bid for magistrate positions across the Microcosm" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleRefresh, disabled: refreshing, className: "flex items-center gap-2 px-3 py-1.5 text-sm border border-neutral-700 rounded text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300 disabled:opacity-50 bg-transparent", children: [(0, jsx_runtime_1.jsx)(IconRefresh, { className: cn('w-4 h-4', refreshing && 'animate-spin') }), "Refresh"] })] }), actionError && ((0, jsx_runtime_1.jsx)("div", { className: "p-3 bg-red-500/10 border border-red-500/30 rounded text-red-400 text-sm", children: actionError })), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg", children: (0, jsx_runtime_1.jsx)("div", { className: "p-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Ongoing" }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-cyan-400 font-mono", children: auctionList.length }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500", children: "auctions" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Total Bids" }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-white font-mono", children: stats.totalBids }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500", children: "bids" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Highest Bid" }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-cyan-400 font-mono", children: stats.highestBid > 0 ? stats.highestBid.toLocaleString() : '--' }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500", children: "MCC" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Total Locked" }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-cyan-400 font-mono", children: stats.totalVolume > 0 ? stats.totalVolume.toLocaleString() : '--' }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500", children: "MCC" })] })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(IconFlame, { className: "w-4 h-4 text-cyan-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-neutral-300 tracking-wider", children: "Active Auctions" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-neutral-500", children: ["(", auctionList.length, ")"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 text-xs text-neutral-500", children: [(0, jsx_runtime_1.jsx)(IconClock, { className: "w-3 h-3" }), (0, jsx_runtime_1.jsx)("span", { children: "Auto-refresh 30s" })] })] }), auctionList.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "text-center py-16", children: [(0, jsx_runtime_1.jsx)(IconGavel, { className: "w-10 h-10 text-neutral-700 mx-auto mb-3" }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 text-sm mb-2", children: "No active auctions" }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 text-xs max-w-md mx-auto", children: "Auctions are held for magistrate positions. When a territory opens for bidding, it will appear here." })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: auctionList.map((auction) => {
+                                const unitType = auction.unit_type || 'station';
+                                const currentPrice = auction.current_price ?? auction.starting_price ?? 0;
+                                const startingPrice = auction.starting_price ?? 0;
+                                const bidIncrement = auction.bid_increment ?? 0;
+                                const minNextBid = currentPrice + bidIncrement;
+                                const priceUp = startingPrice > 0
+                                    ? ((currentPrice - startingPrice) / startingPrice * 100).toFixed(1)
+                                    : '0';
+                                const isHot = (auction.bid_count || 0) >= 5;
+                                return ((0, jsx_runtime_1.jsxs)("div", { className: cn('bg-neutral-800 border rounded p-5 hover:border-cyan-400/50 transition-colors', isHot ? 'border-cyan-400/30' : 'border-neutral-700'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400", children: UNIT_ICONS[unitType] || UNIT_ICONS.station }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-white font-bold", children: auction.unit_name || `Territory #${auction.unit_id || auction.auction_id || auction.id}` }), isHot && ((0, jsx_runtime_1.jsxs)(Badge, { className: BADGE_VARIANTS.warning, children: [(0, jsx_runtime_1.jsx)(IconFlame, { className: "w-3 h-3" }), "Hot"] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-0.5", children: [(0, jsx_runtime_1.jsx)(Badge, { className: BADGE_VARIANTS.info, children: UNIT_LABELS[unitType] || 'Station' }), (0, jsx_runtime_1.jsx)(Badge, { className: BADGE_VARIANTS.default, children: auction.auction_type === 'first' ? 'First Auction' : auction.auction_type === 'second' ? 'Second Auction' : 'Auction' }), (0, jsx_runtime_1.jsx)(Badge, { className: BADGE_VARIANTS.success, children: "Active" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 bg-neutral-800 border border-neutral-700 rounded px-3 py-1.5 text-sm", children: [(0, jsx_runtime_1.jsx)(IconClock, { className: "w-3.5 h-3.5 text-cyan-400" }), (0, jsx_runtime_1.jsx)(TimeRemaining, { endTime: auction.end_time, className: "text-cyan-400 font-bold font-mono" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3 mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 border border-neutral-700 rounded p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Starting Price" }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-300 font-mono", children: startingPrice.toLocaleString() }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500", children: "MCC" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Current Highest" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xl font-bold text-cyan-400 font-mono", children: currentPrice.toLocaleString() }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 text-xs", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-500", children: "MCC" }), Number(priceUp) > 0 && ((0, jsx_runtime_1.jsxs)("span", { className: "text-white flex items-center", children: [(0, jsx_runtime_1.jsx)(IconArrowUpRight, { className: "w-3 h-3" }), "+", priceUp, "%"] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 border border-neutral-700 rounded p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Bid Count" }), (0, jsx_runtime_1.jsx)("div", { className: "text-white font-bold font-mono", children: auction.bid_count || 0 }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500", children: "bids" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 border border-neutral-700 rounded p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Min Increment" }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-300 font-mono", children: bidIncrement.toLocaleString() }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-500", children: ["MCC (", '\u2265', "5%)"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4 text-xs text-neutral-500", children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(IconLock, { className: "w-3 h-3" }), "50% deposit"] }), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(IconCrown, { className: "w-3 h-3" }), "Winner = Magistrate"] }), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(IconTimer, { className: "w-3 h-3" }), "24h no-bid ends"] })] }), (auction.status === 'active' || !auction.status) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => openBidDialog(auction), className: "flex items-center gap-2 px-4 py-2 bg-cyan-700 hover:bg-cyan-600 text-white rounded text-sm font-mono", children: [(0, jsx_runtime_1.jsx)(IconGavel, { className: "w-4 h-4" }), "Place Bid"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => openBidDialog(auction), className: "flex items-center gap-1.5 px-3 py-1.5 text-xs border border-neutral-700 rounded text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300 bg-transparent", children: [(0, jsx_runtime_1.jsx)(IconZap, { className: "w-3 h-3" }), minNextBid.toLocaleString(), " MCC"] })] }))] })] }, auction.auction_id ?? auction.id));
+                            }) }))] }) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg", children: (0, jsx_runtime_1.jsx)("div", { className: "p-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)(IconAward, { className: "w-3.5 h-3.5 text-cyan-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-neutral-400 tracking-wider", children: "Auction Target" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-neutral-300 mb-1", children: "Territory magistrate positions" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500", children: "Station / Matrix / Sector / System levels" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)(IconTimer, { className: "w-3.5 h-3.5 text-cyan-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-neutral-400 tracking-wider", children: "Bidding Rules" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-neutral-300 mb-1", children: ["50% deposit, ", '\u2265', "5% increment"] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500", children: "24h with no new bids ends the auction" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)(IconUsers, { className: "w-3.5 h-3.5 text-cyan-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-neutral-400 tracking-wider", children: "Participation" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-neutral-300 mb-1", children: "Sufficient MCC balance required" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500", children: "Miner level or above to participate" })] })] }) }) }), bidsList.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { onClick: () => setShowMyBids(!showMyBids), className: "flex items-center justify-between cursor-pointer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(IconShield, { className: "w-4 h-4 text-cyan-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-300 tracking-wider", children: "My Bids" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-neutral-500", children: [bidsList.length, " bids"] }), stats.myLeading > 0 && (0, jsx_runtime_1.jsxs)(Badge, { className: BADGE_VARIANTS.success, children: [stats.myLeading, " leading"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-4", children: showMyBids
+                                        ? (0, jsx_runtime_1.jsx)(IconChevronUp, { className: "w-4 h-4 text-neutral-500" })
+                                        : (0, jsx_runtime_1.jsx)(IconChevronDown, { className: "w-4 h-4 text-neutral-500" }) })] }), showMyBids && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 space-y-2", children: bidsList.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-8 text-neutral-500 text-sm", children: "No bid records" })) : bidsList.map((bid, idx) => {
+                                const si = BID_STATUS_MAP[bid.status] || { label: bid.status || 'active', variant: 'default' };
+                                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between bg-neutral-800 border border-neutral-700 rounded p-3 hover:bg-neutral-700 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(Badge, { className: BADGE_VARIANTS[si.variant] || BADGE_VARIANTS.default, children: si.label }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-300 text-sm", children: bid.unit_name || `#${bid.auction_id}` }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white text-sm font-bold font-mono", children: [(bid.bid_amount ?? bid.amount ?? 0).toLocaleString(), " MCC"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-3", children: bid.created_at && (0, jsx_runtime_1.jsx)(FormattedDateTime, { dateTime: bid.created_at, className: "text-neutral-500 text-xs font-mono" }) })] }, bid.bid_id ?? idx));
+                            }) }))] }) })), historyList.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { onClick: () => setShowHistory(!showHistory), className: "flex items-center justify-between cursor-pointer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(IconBarChart, { className: "w-4 h-4 text-neutral-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-300 tracking-wider", children: "Auction History" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-neutral-500", children: [historyList.length, " auctions"] })] }), showHistory
+                                    ? (0, jsx_runtime_1.jsx)(IconChevronUp, { className: "w-4 h-4 text-neutral-500" })
+                                    : (0, jsx_runtime_1.jsx)(IconChevronDown, { className: "w-4 h-4 text-neutral-500" })] }), showHistory && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 space-y-2", children: historyList.map((a, idx) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between bg-neutral-800 border border-neutral-700 rounded p-3 hover:bg-neutral-700 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400", children: UNIT_ICONS[a.unit_type || 'station'] || UNIT_ICONS.station }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-300 text-sm", children: a.unit_name || `Territory #${a.unit_id || a.auction_id}` }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 text-xs", children: UNIT_LABELS[a.unit_type || 'station'] || 'Station' })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-white text-sm font-bold font-mono", children: [(a.current_price ?? a.final_price ?? 0).toLocaleString(), " MCC"] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-neutral-500 text-xs", children: [a.bid_count || 0, " bids"] })] }), (0, jsx_runtime_1.jsx)(Badge, { className: a.status === 'cancelled' ? BADGE_VARIANTS.error : BADGE_VARIANTS.default, children: a.status === 'ended' ? 'Ended' : a.status === 'cancelled' ? 'Cancelled' : 'Sold' })] })] }, a.auction_id ?? idx))) }))] }) })), (0, jsx_runtime_1.jsx)(Modal, { open: bidDialogOpen, onClose: () => setBidDialogOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6 space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-white font-mono font-bold flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(IconGavel, { className: "w-5 h-5 text-cyan-400" }), "Place Bid"] }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400 font-mono text-sm mt-1", children: selectedAuction?.unit_name || `Territory #${selectedAuction?.unit_id || selectedAuction?.auction_id || selectedAuction?.id}` })] }), selectedAuction && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 flex-wrap", children: [(0, jsx_runtime_1.jsx)(Badge, { className: BADGE_VARIANTS.info, children: UNIT_LABELS[selectedAuction.unit_type || 'station'] || 'Station' }), (0, jsx_runtime_1.jsx)(Badge, { className: BADGE_VARIANTS.default, children: selectedAuction.auction_type === 'first' ? 'First Auction' : selectedAuction.auction_type === 'second' ? 'Second Auction' : 'Auction' }), (0, jsx_runtime_1.jsxs)(Badge, { className: BADGE_VARIANTS.warning, children: [(0, jsx_runtime_1.jsx)(IconCrown, { className: "w-3 h-3" }), "Winner = Magistrate"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 border border-neutral-700 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Current Highest" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-3xl font-bold text-cyan-400 font-mono", children: [(selectedAuction.current_price ?? selectedAuction.starting_price ?? 0).toLocaleString(), ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-base text-neutral-500", children: "MCC" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-500 mt-1", children: [selectedAuction.bid_count || 0, " bids \u00B7 Starting price ", (selectedAuction.starting_price ?? 0).toLocaleString(), " MCC"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center p-3 bg-neutral-800 rounded border border-neutral-700 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400", children: "Min Next Bid" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white font-bold font-mono", children: [((selectedAuction.current_price ?? selectedAuction.starting_price ?? 0) + (selectedAuction.bid_increment ?? 0)).toLocaleString(), " MCC"] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: ["Bid Amount (min ", ((selectedAuction.current_price ?? 0) + (selectedAuction.bid_increment ?? 0)).toLocaleString(), " MCC)"] }), (0, jsx_runtime_1.jsx)("input", { type: "number", step: selectedAuction.bid_increment ?? 1, value: bidAmount, onChange: (e) => setBidAmount(e.target.value), placeholder: "Enter bid amount", className: "w-full bg-neutral-800 border border-neutral-600 text-white placeholder-neutral-400 px-3 py-2.5 rounded text-sm font-mono focus:border-cyan-400 focus:outline-none" })] }), bidAmount && !isNaN(parseFloat(bidAmount)) && parseFloat(bidAmount) > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2 p-3 bg-neutral-800 rounded border border-neutral-700 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400", children: "Bid Amount:" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-neutral-300 font-mono", children: [parseFloat(bidAmount).toLocaleString(), " MCC"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400", children: "Deposit (50%):" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-cyan-400 font-mono", children: [(parseFloat(bidAmount) * 0.5).toLocaleString(), " MCC"] })] })] })), actionError && ((0, jsx_runtime_1.jsxs)("div", { className: "text-red-500 text-xs flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(IconLock, { className: "w-3 h-3" }), actionError] }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-3 pt-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setBidDialogOpen(false), className: "px-4 py-2 text-sm border border-neutral-700 rounded text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300 bg-transparent", children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { onClick: handlePlaceBid, disabled: bidLoading || !bidAmount, className: "px-4 py-2 text-sm bg-cyan-700 hover:bg-cyan-600 text-white rounded disabled:opacity-50 font-mono", children: bidLoading ? 'Processing...' : 'Confirm Bid' })] })] }) })] }));
 }

package/dist/components/dashboard/assets-summary.d.ts

@@ -1,5 +1,6 @@
 export interface MicrocosmAssetsSummaryProps {
     basePath?: string;
     onNavigate?: (path: string) => void;
+    accentColor?: string;
 }
-export declare function MicrocosmAssetsSummary({ basePath, onNavigate }: MicrocosmAssetsSummaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function MicrocosmAssetsSummary({ basePath, onNavigate, accentColor }: MicrocosmAssetsSummaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dashboard/assets-summary.js

@@ -9,7 +9,7 @@ const RANK_COLOR = {
     recruit: 'text-neutral-500', prospect: 'text-neutral-400', miner: 'text-cyan-300',
     commander: 'text-white', pioneer: 'text-cyan-400', warden: 'text-cyan-300', admiral: 'text-cyan-300',
 };
-function MicrocosmAssetsSummary({ basePath = '', onNavigate }) {
+function MicrocosmAssetsSummary({ basePath = '', onNavigate, accentColor }) {
     const { balance: mccData, loading: mccLoading } = (0, auth_react_1.useMCC)(120000);
     const { balance: mcdData, loading: mcdLoading } = (0, auth_react_1.useMCD)(120000);
     const { data: levelData } = (0, auth_react_1.useUserLevel)();
@@ -30,10 +30,15 @@ function MicrocosmAssetsSummary({ basePath = '', onNavigate }) {
     const nextRank = levelData?.next_level ?? null;
     const progress = levelData?.upgrade_progress?.percentage ?? 0;
     const fmt = (n, d = 2) => n.toLocaleString('en-US', { minimumFractionDigits: d, maximumFractionDigits: d });
-    const rankColor = RANK_COLOR[(rank ?? '').toLowerCase()] ?? 'text-neutral-500';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 lg:grid-cols-5 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 hover:border-cyan-400/50 transition-colors cursor-pointer h-full", onClick: () => onNavigate?.(resolvePath('/mcc/wallet')), role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && onNavigate?.(resolvePath('/mcc/wallet')), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "w-3.5 h-3.5 text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-[10px] font-mono tracking-wider", children: "MCC_BALANCE" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold font-mono text-cyan-400", children: mccLoading
-                            ? (0, jsx_runtime_1.jsx)("span", { className: "inline-block w-5 h-5 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin" })
+    const rankColor = accentColor
+        ? undefined
+        : RANK_COLOR[(rank ?? '').toLowerCase()] ?? 'text-neutral-500';
+    const rankStyle = accentColor ? { color: accentColor } : undefined;
+    const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
+    const spinnerClass = accentColor ? 'inline-block w-5 h-5 border-2 rounded-full animate-spin' : 'inline-block w-5 h-5 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin';
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 lg:grid-cols-5 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 hover:border-cyan-400/50 transition-colors cursor-pointer h-full", onClick: () => onNavigate?.(resolvePath('/mcc/wallet')), role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && onNavigate?.(resolvePath('/mcc/wallet')), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "w-3.5 h-3.5 text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-[10px] font-mono tracking-wider", children: "MCC_BALANCE" })] }), (0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'text-2xl font-bold font-mono' : 'text-2xl font-bold font-mono text-cyan-400', style: accentColor ? { color: accentColor } : undefined, children: mccLoading
+                            ? (0, jsx_runtime_1.jsx)("span", { className: spinnerClass, style: spinnerBorderColor })
                             : fmt(mccBalance, 3) }), mccUsdValue > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-500 font-mono mt-1", children: ["\u2248 $", fmt(mccUsdValue)] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 hover:border-cyan-400/50 transition-colors cursor-pointer h-full", onClick: () => onNavigate?.(resolvePath('/mcc/mcd')), role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && onNavigate?.(resolvePath('/mcc/mcd')), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5 text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-[10px] font-mono tracking-wider", children: "MCD_BALANCE" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold font-mono text-white", children: mcdLoading
-                            ? (0, jsx_runtime_1.jsx)("span", { className: "inline-block w-5 h-5 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin" })
-                            : fmt(mcdAmount) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono mt-1", children: ["in: ", fmt(mcdReceived, 0), " out: ", fmt(mcdSpent, 0)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5 text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-[10px] font-mono tracking-wider", children: "LOCKED" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold font-mono text-white", children: fmt(lockedAmount, 0) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono mt-1", children: [activeLocks.length, " lock period", activeLocks.length !== 1 ? 's' : ''] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5 text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-[10px] font-mono tracking-wider", children: "WALLETS" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold font-mono text-white", children: walletCount })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-[10px] font-mono tracking-wider mb-2", children: "RANK" }), (0, jsx_runtime_1.jsx)("div", { className: `text-lg font-bold font-mono ${rankColor}`, children: rank || 'N/A' }), nextRank && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full bg-neutral-800 rounded-full h-1.5", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-cyan-400 h-1.5 rounded-full transition-all", style: { width: `${Math.min(progress, 100)}%` } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono mt-1", children: [progress.toFixed(0), "% \u2192 ", nextRank] })] }))] })] }));
+                            ? (0, jsx_runtime_1.jsx)("span", { className: spinnerClass, style: spinnerBorderColor })
+                            : fmt(mcdAmount) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono mt-1", children: ["in: ", fmt(mcdReceived, 0), " out: ", fmt(mcdSpent, 0)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5 text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-[10px] font-mono tracking-wider", children: "LOCKED" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold font-mono text-white", children: fmt(lockedAmount, 0) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono mt-1", children: [activeLocks.length, " lock period", activeLocks.length !== 1 ? 's' : ''] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5 text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-[10px] font-mono tracking-wider", children: "WALLETS" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold font-mono text-white", children: walletCount })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-[10px] font-mono tracking-wider mb-2", children: "RANK" }), (0, jsx_runtime_1.jsx)("div", { className: `text-lg font-bold font-mono ${rankColor ?? ''}`, style: rankStyle, children: rank || 'N/A' }), nextRank && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full bg-neutral-800 rounded-full h-1.5", children: (0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'h-1.5 rounded-full transition-all' : 'bg-cyan-400 h-1.5 rounded-full transition-all', style: { width: `${Math.min(progress, 100)}%`, ...(accentColor ? { backgroundColor: accentColor } : {}) } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono mt-1", children: [progress.toFixed(0), "% \u2192 ", nextRank] })] }))] })] }));
 }

package/dist/components/dashboard/dashboard-overview.d.ts

@@ -3,5 +3,6 @@ export interface MicrocosmDashboardOverviewProps {
     onNavigate?: (path: string) => void;
     showHeader?: boolean;
     headerText?: string;
+    accentColor?: string;
 }
-export declare function MicrocosmDashboardOverview({ basePath, onNavigate, showHeader, headerText, }: MicrocosmDashboardOverviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MicrocosmDashboardOverview({ basePath, onNavigate, showHeader, headerText, accentColor, }: MicrocosmDashboardOverviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dashboard/dashboard-overview.js

@@ -49,6 +49,15 @@ function LazySection({ children, fallback }) {
     }, []);
     return (0, jsx_runtime_1.jsx)("div", { ref: ref, children: visible ? children : fallback });
 }
-function MicrocosmDashboardOverview({ basePath = '', onNavigate, showHeader = true, headerText = 'SHARED NETWORK · SHARED FUTURE', }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto font-mono p-6 space-y-6", children: [showHeader && ((0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("h1", { className: "text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-cyan-200", children: headerText }) })), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(market_overview_bar_1.MicrocosmMarketBar, {}) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(quick_actions_1.MicrocosmQuickActions, { basePath: basePath, onNavigate: onNavigate }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(assets_summary_1.MicrocosmAssetsSummary, { basePath: basePath, onNavigate: onNavigate }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(price_chart_1.MicrocosmPriceChart, {}) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" }), (0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" })] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(my_mining_1.MicrocosmMyMining, { detailsPath: `${basePath}/mcc/mining`, onNavigate: onNavigate }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(mining_weight_1.MicrocosmMiningWeight, {}) })] }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" }), (0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" })] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(minting_stats_1.MicrocosmMintingStats, {}) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(ecosystem_stats_1.MicrocosmEcosystemStats, {}) })] }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(CardSkeleton, {}), (0, jsx_runtime_1.jsx)(CardSkeleton, {})] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(mcc_token_stats_1.MicrocosmMCCTokenStats, {}) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(mcd_stats_1.MicrocosmMCDStats, {}) })] }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsx)(CardSkeleton, {}), children: (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(lock_periods_1.MicrocosmLockPeriods, {}) }) })] }));
+/** Convert hex color "#d4a846" to RGB string "212,168,70" */
+function hexToRgb(hex) {
+    const h = hex.replace('#', '');
+    const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16);
+    return `${(n >> 16) & 255},${(n >> 8) & 255},${n & 255}`;
+}
+function MicrocosmDashboardOverview({ basePath = '', onNavigate, showHeader = true, headerText = 'SHARED NETWORK · SHARED FUTURE', accentColor, }) {
+    const rootStyle = accentColor
+        ? { '--mc-accent': accentColor, '--mc-accent-rgb': hexToRgb(accentColor) }
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto font-mono p-6 space-y-6", style: rootStyle, children: [showHeader && ((0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("h1", { className: accentColor ? 'text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight' : 'text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-cyan-200', style: accentColor ? { backgroundImage: `linear-gradient(to right, ${accentColor}, ${accentColor}cc)`, WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' } : undefined, children: headerText }) })), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(market_overview_bar_1.MicrocosmMarketBar, { accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(quick_actions_1.MicrocosmQuickActions, { basePath: basePath, onNavigate: onNavigate, accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(assets_summary_1.MicrocosmAssetsSummary, { basePath: basePath, onNavigate: onNavigate, accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(price_chart_1.MicrocosmPriceChart, { accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" }), (0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" })] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(my_mining_1.MicrocosmMyMining, { detailsPath: `${basePath}/mcc/mining`, onNavigate: onNavigate, accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(mining_weight_1.MicrocosmMiningWeight, { accentColor: accentColor }) })] }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" }), (0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" })] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(minting_stats_1.MicrocosmMintingStats, { accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(ecosystem_stats_1.MicrocosmEcosystemStats, { accentColor: accentColor }) })] }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(CardSkeleton, {}), (0, jsx_runtime_1.jsx)(CardSkeleton, {})] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(mcc_token_stats_1.MicrocosmMCCTokenStats, { accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(mcd_stats_1.MicrocosmMCDStats, { accentColor: accentColor }) })] }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsx)(CardSkeleton, {}), children: (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(lock_periods_1.MicrocosmLockPeriods, { accentColor: accentColor }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-4 space-y-1", children: [(0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'text-xs font-mono' : 'text-xs text-cyan-400/60 font-mono', style: accentColor ? { color: `rgba(${hexToRgb(accentColor)},0.6)` } : undefined, children: "Data refreshes every 4 hours \u00B7 For real-time data, please check on-chain directly" }), (0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'text-xs font-mono' : 'text-xs text-cyan-400/60 font-mono', style: accentColor ? { color: `rgba(${hexToRgb(accentColor)},0.6)` } : undefined, children: "\u6570\u636E\u6BCF 4 \u5C0F\u65F6\u66F4\u65B0 \u00B7 \u5373\u65F6\u6570\u636E\u8BF7\u76F4\u63A5\u67E5\u8BE2\u94FE\u4E0A" }), (0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'text-xs font-mono' : 'text-xs text-cyan-400/60 font-mono', style: accentColor ? { color: `rgba(${hexToRgb(accentColor)},0.6)` } : undefined, children: "\u30C7\u30FC\u30BF\u306F4\u6642\u9593\u3054\u3068\u306B\u66F4\u65B0 \u00B7 \u30EA\u30A2\u30EB\u30BF\u30A4\u30E0\u30C7\u30FC\u30BF\u306F\u30AA\u30F3\u30C1\u30A7\u30FC\u30F3\u3067\u78BA\u8A8D" }), (0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'text-xs font-mono' : 'text-xs text-cyan-400/60 font-mono', style: accentColor ? { color: `rgba(${hexToRgb(accentColor)},0.6)` } : undefined, children: "\uB370\uC774\uD130\uB294 4\uC2DC\uAC04\uB9C8\uB2E4 \uAC31\uC2E0 \u00B7 \uC2E4\uC2DC\uAC04 \uB370\uC774\uD130\uB294 \uC628\uCCB4\uC778\uC5D0\uC11C \uD655\uC778" })] })] }));
 }

package/dist/components/dashboard/ecosystem-stats.d.ts

@@ -1 +1,4 @@
-export declare function MicrocosmEcosystemStats(): import("react/jsx-runtime").JSX.Element;
+export interface MicrocosmEcosystemStatsProps {
+    accentColor?: string;
+}
+export declare function MicrocosmEcosystemStats({ accentColor }?: MicrocosmEcosystemStatsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dashboard/ecosystem-stats.js

@@ -5,24 +5,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MicrocosmEcosystemStats = MicrocosmEcosystemStats;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const auth_react_1 = require("@microcosmmoney/auth-react");
-/* Inline SVG icons (16x16, cyan stroke) */
-const IconUsersTotal = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#22d3ee", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "7", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] }));
-const IconActivity = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#22d3ee", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2" }) }));
-const IconHardHat = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#22d3ee", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2 18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v2z" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 15V6.5a3.5 3.5 0 0 1 7 0V15" }), (0, jsx_runtime_1.jsx)("path", { d: "M4 15v-5a8 8 0 0 1 16 0v5" })] }));
-const IconMap = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#22d3ee", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("polygon", { points: "3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21" }), (0, jsx_runtime_1.jsx)("line", { x1: "9", x2: "9", y1: "3", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "15", x2: "15", y1: "6", y2: "21" })] }));
-const IconGlobe = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#22d3ee", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 12h20" })] }));
-function MicrocosmEcosystemStats() {
+/* Inline SVG icons (16x16, stroke-based) */
+const IconUsersTotal = ({ stroke = '#22d3ee' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "7", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] }));
+const IconActivity = ({ stroke = '#22d3ee' }) => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2" }) }));
+const IconHardHat = ({ stroke = '#22d3ee' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2 18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v2z" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 15V6.5a3.5 3.5 0 0 1 7 0V15" }), (0, jsx_runtime_1.jsx)("path", { d: "M4 15v-5a8 8 0 0 1 16 0v5" })] }));
+const IconMap = ({ stroke = '#22d3ee' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("polygon", { points: "3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21" }), (0, jsx_runtime_1.jsx)("line", { x1: "9", x2: "9", y1: "3", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "15", x2: "15", y1: "6", y2: "21" })] }));
+const IconGlobe = ({ stroke = '#22d3ee' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 12h20" })] }));
+function MicrocosmEcosystemStats({ accentColor } = {}) {
     const { data: overview, loading: loadingOverview } = (0, auth_react_1.usePlatformStats)();
     const { data: userLevels, loading: loadingUsers } = (0, auth_react_1.useDashboardUserStats)();
     const loading = loadingOverview || loadingUsers;
+    const ac = accentColor || '#22d3ee';
     const stats = [
         { label: 'total_users', value: overview?.total_users ?? userLevels?.total_users, icon: IconUsersTotal },
         { label: '24h_active', value: overview?.active_users_24h, icon: IconActivity },
         { label: 'miners', value: userLevels?.miners_and_above ?? overview?.miners_count, icon: IconHardHat },
         { label: 'territories', value: overview?.total_territories, icon: IconMap },
     ];
-    return ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg h-full hover:border-cyan-400/50 transition-colors", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-4", children: [(0, jsx_runtime_1.jsx)(IconGlobe, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-xs font-mono tracking-wider", children: "ECOSYSTEM" })] }), loading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-8", children: (0, jsx_runtime_1.jsx)("span", { className: "inline-block w-5 h-5 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-3", children: stats.map((s) => {
+    const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
+    const spinnerClass = accentColor ? 'inline-block w-5 h-5 border-2 rounded-full animate-spin' : 'inline-block w-5 h-5 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin';
+    return ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg h-full hover:border-cyan-400/50 transition-colors", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-4", children: [(0, jsx_runtime_1.jsx)(IconGlobe, { stroke: ac }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-xs font-mono tracking-wider", children: "ECOSYSTEM" })] }), loading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-8", children: (0, jsx_runtime_1.jsx)("span", { className: spinnerClass, style: spinnerBorderColor }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-3", children: stats.map((s) => {
                         const Icon = s.icon;
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-1", children: [(0, jsx_runtime_1.jsx)(Icon, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-neutral-400 font-mono tracking-wider", children: s.label })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xl font-bold font-mono text-white", children: s.value != null ? s.value.toLocaleString() : '--' })] }, s.label));
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-1", children: [(0, jsx_runtime_1.jsx)(Icon, { stroke: ac }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-neutral-400 font-mono tracking-wider", children: s.label })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xl font-bold font-mono text-white", children: s.value != null ? s.value.toLocaleString() : '--' })] }, s.label));
                     }) }))] }) }));
 }

package/dist/components/dashboard/lock-periods.d.ts

@@ -1 +1,4 @@
-export declare function MicrocosmLockPeriods(): import("react/jsx-runtime").JSX.Element | null;
+export interface MicrocosmLockPeriodsProps {
+    accentColor?: string;
+}
+export declare function MicrocosmLockPeriods({ accentColor }?: MicrocosmLockPeriodsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/dashboard/lock-periods.js

@@ -18,12 +18,12 @@ function daysRemaining(endTime) {
     const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
     return `${days}d`;
 }
-function MicrocosmLockPeriods() {
+function MicrocosmLockPeriods({ accentColor } = {}) {
     const { data } = (0, auth_react_1.useMCCLocks)();
     const raw = data;
     const locks = Array.isArray(raw) ? raw : raw?.locks ?? [];
     const activeLocks = locks.filter((p) => p.status === 'locked');
     if (activeLocks.length === 0)
         return null;
-    return ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors", children: (0, jsx_runtime_1.jsx)("div", { className: "p-6", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: activeLocks.map((lock) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-start mb-2", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-xs font-mono tracking-wider", children: lock.reason }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xl font-bold font-mono text-cyan-400 mt-1", children: [(lock.amount ?? 0).toLocaleString(), " MCC"] })] }), (0, jsx_runtime_1.jsx)("span", { className: "px-2 py-0.5 bg-cyan-400/20 text-cyan-400 text-xs font-mono rounded", children: "LOCKED" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-500 space-y-1 font-mono", children: [(0, jsx_runtime_1.jsxs)("div", { children: ["unlock_at: ", formatDateTime(lock.lock_end)] }), (0, jsx_runtime_1.jsxs)("div", { children: ["remaining: ", (0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400", children: daysRemaining(lock.lock_end) })] })] })] }, lock.lock_id))) }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors", children: (0, jsx_runtime_1.jsx)("div", { className: "p-6", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: activeLocks.map((lock) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-start mb-2", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-xs font-mono tracking-wider", children: lock.reason }), (0, jsx_runtime_1.jsxs)("div", { className: accentColor ? 'text-xl font-bold font-mono mt-1' : 'text-xl font-bold font-mono text-cyan-400 mt-1', style: accentColor ? { color: accentColor } : undefined, children: [(lock.amount ?? 0).toLocaleString(), " MCC"] })] }), (0, jsx_runtime_1.jsx)("span", { className: accentColor ? 'px-2 py-0.5 text-xs font-mono rounded' : 'px-2 py-0.5 bg-cyan-400/20 text-cyan-400 text-xs font-mono rounded', style: accentColor ? { backgroundColor: `${accentColor}33`, color: accentColor } : undefined, children: "LOCKED" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-500 space-y-1 font-mono", children: [(0, jsx_runtime_1.jsxs)("div", { children: ["unlock_at: ", formatDateTime(lock.lock_end)] }), (0, jsx_runtime_1.jsxs)("div", { children: ["remaining: ", (0, jsx_runtime_1.jsx)("span", { className: accentColor ? '' : 'text-cyan-400', style: accentColor ? { color: accentColor } : undefined, children: daysRemaining(lock.lock_end) })] })] })] }, lock.lock_id))) }) }) }));
 }

package/dist/components/dashboard/market-overview-bar.d.ts

@@ -1 +1,4 @@
-export declare function MicrocosmMarketBar(): import("react/jsx-runtime").JSX.Element;
+export interface MicrocosmMarketBarProps {
+    accentColor?: string;
+}
+export declare function MicrocosmMarketBar({ accentColor }?: MicrocosmMarketBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dashboard/market-overview-bar.js

@@ -12,8 +12,9 @@ function formatCompact(value) {
         return `${(value / 1000).toFixed(1)}K`;
     return value.toFixed(2);
 }
-function MicrocosmMarketBar() {
+function MicrocosmMarketBar({ accentColor } = {}) {
     const { data, loading } = (0, auth_react_1.useMarketData)();
+    const ac = accentColor || '#22d3ee';
     if (loading || !data) {
         return ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-6", children: Array.from({ length: 6 }).map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 animate-pulse", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-3 bg-neutral-800 rounded w-16 mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "h-6 bg-neutral-800 rounded w-24" })] }, i))) }));
     }
@@ -27,14 +28,16 @@ function MicrocosmMarketBar() {
             label: 'MCC_PRICE',
             value: `$${(data.price_usd ?? 0).toFixed(4)}`,
             sub: `${isPositive ? '~+' : '~'}${priceChange24h.toFixed(2)}%`,
-            subColor: isPositive ? 'text-cyan-400' : 'text-red-400',
-            color: 'text-cyan-400',
+            subColor: isPositive ? (accentColor ? '' : 'text-cyan-400') : 'text-red-400',
+            subStyle: isPositive && accentColor ? { color: accentColor } : undefined,
+            color: accentColor ? '' : 'text-cyan-400',
+            colorStyle: accentColor ? { color: accentColor } : undefined,
         },
-        { label: '24H_VOLUME', value: `$${formatCompact(data.volume_24h ?? 0)}`, color: 'text-cyan-300' },
+        { label: '24H_VOLUME', value: `$${formatCompact(data.volume_24h ?? 0)}`, color: accentColor ? '' : 'text-cyan-300', colorStyle: accentColor ? { color: accentColor } : undefined },
         { label: 'LIQUIDITY', value: (data.liquidity_usd ?? 0) > 0 ? `$${formatCompact(data.liquidity_usd)}` : '-', color: 'text-white' },
         { label: 'FDV', value: (data.fdv ?? 0) > 0 ? `$${formatCompact(data.fdv)}` : '-', color: 'text-white' },
-        { label: '24H_TRADES', value: `${trades}`, color: 'text-cyan-400' },
+        { label: '24H_TRADES', value: `${trades}`, color: accentColor ? '' : 'text-cyan-400', colorStyle: accentColor ? { color: accentColor } : undefined },
         { label: 'BUY/SELL', value: `${buys}/${sells}`, color: 'text-white' },
     ];
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-6", children: [stats.map((stat) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-[10px] font-mono mb-1 tracking-wider", children: stat.label }), (0, jsx_runtime_1.jsx)("div", { className: `text-xl font-bold font-mono ${stat.color}`, children: stat.value }), stat.sub && ((0, jsx_runtime_1.jsx)("div", { className: `text-xs font-mono mt-0.5 ${stat.subColor || 'text-neutral-500'}`, children: stat.sub }))] }, stat.label))), (0, jsx_runtime_1.jsx)("div", { className: "col-span-full text-[10px] text-neutral-600 font-mono text-right mt-1", children: "Data refreshes every 4h \u00B7 For real-time data, check on-chain directly" })] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-6", children: stats.map((stat) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-[10px] font-mono mb-1 tracking-wider", children: stat.label }), (0, jsx_runtime_1.jsx)("div", { className: `text-xl font-bold font-mono ${stat.color}`, style: stat.colorStyle, children: stat.value }), stat.sub && ((0, jsx_runtime_1.jsx)("div", { className: `text-xs font-mono mt-0.5 ${stat.subColor || 'text-neutral-500'}`, style: stat.subStyle, children: stat.sub }))] }, stat.label))) }));
 }

package/dist/components/dashboard/mcc-token-stats.d.ts

@@ -1 +1,4 @@
-export declare function MicrocosmMCCTokenStats(): import("react/jsx-runtime").JSX.Element;
+export interface MicrocosmMCCTokenStatsProps {
+    accentColor?: string;
+}
+export declare function MicrocosmMCCTokenStats({ accentColor }?: MicrocosmMCCTokenStatsProps): import("react/jsx-runtime").JSX.Element;