@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog/components/metrics/AnimatedMetricCard.js

@@ -0,0 +1,1049 @@
+"use client";
+import {
+  useWebHaptics
+} from "../../../catalog-chunks/chunk-EC4R54F3.js";
+
+// .generated/catalog/components/metrics/AnimatedMetricCard.tsx
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { TrendingUp, Zap, Check, ArrowUpRight, Share2, MoreHorizontal, ChevronDown, Star, Crown, HelpCircle } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AnimatedMetricCard = ({ config, theme }) => {
+  const [stockRange, setStockRange] = useState("1W");
+  const [viewsRange, setViewsRange] = useState("Day");
+  const [salesAnalyticsRange, setSalesAnalyticsRange] = useState("Weekly");
+  const [salesTargetRange, setSalesTargetRange] = useState("Yearly");
+  const [timerActive, setTimerActive] = useState(false);
+  const [decibelLevel, setDecibelLevel] = useState(40);
+  const { trigger: triggerHaptic } = useWebHaptics();
+  const isDark = theme === "dark";
+  const containerClasses = `w-full h-full p-4 flex flex-col justify-between select-none font-sans transition-colors duration-300 ${isDark ? "text-white" : "text-black"}`;
+  switch (config.interactionType) {
+    // --- CACHEABLE BANDWIDTH COST CARD ---
+    case "cacheable-bandwidth-cost":
+      return /* @__PURE__ */ jsxs("div", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? "bg-[#18181A] text-white border-white/10" : "bg-[#FAFAFA] text-neutral-900 border-neutral-200 shadow-sm"}`, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-3xl font-black tracking-tight", children: "90.5 GB" }),
+            /* @__PURE__ */ jsx("span", { className: "text-base font-bold text-neutral-400 font-normal", children: "(69.8%)" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs font-semibold mt-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-neutral-500 dark:text-neutral-400", children: [
+              /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-[#A855F7]" }),
+              /* @__PURE__ */ jsx("span", { children: "Cacheable Bandwidth" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-neutral-600 dark:text-neutral-300 font-bold", children: [
+              /* @__PURE__ */ jsx("span", { className: "w-3.5 h-3.5 rounded-full bg-neutral-200 dark:bg-white/15 text-[10px] flex items-center justify-center font-black", children: "$" }),
+              /* @__PURE__ */ jsx("span", { children: "$9.50" }),
+              /* @__PURE__ */ jsx(HelpCircle, { className: "w-3.5 h-3.5 text-neutral-400 cursor-pointer" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "my-2", children: /* @__PURE__ */ jsxs("div", { className: "w-full h-4 bg-neutral-200 dark:bg-neutral-800 rounded-full flex items-center p-0.5 overflow-hidden gap-0.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-full w-[25%] bg-[#1E1B4B] dark:bg-[#312E81] rounded-l-full" }),
+          /* @__PURE__ */ jsx("div", { className: "h-full w-[20%] bg-[#A855F7]" }),
+          /* @__PURE__ */ jsx("div", { className: "h-full flex-1 rounded-r-full bg-[#F3E8FF] dark:bg-[#2E1065] relative overflow-hidden", children: /* @__PURE__ */ jsxs("svg", { className: "absolute inset-0 w-full h-full opacity-40", viewBox: "0 0 100 100", preserveAspectRatio: "none", children: [
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: "bandwidth-stripes", width: "8", height: "8", patternTransform: "rotate(90 0 0)", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("line", { x1: "0", y1: "0", x2: "0", y2: "8", stroke: "#A855F7", strokeWidth: "4" }) }) }),
+            /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "url(#bandwidth-stripes)" })
+          ] }) })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 text-xs font-semibold", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between text-neutral-600 dark:text-neutral-300", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-[#A855F7]" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Cached ",
+              /* @__PURE__ */ jsx("strong", { className: "text-black dark:text-white font-bold", children: "12.8 GB" }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "text-neutral-400 font-normal", children: "(9.8%)" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between text-neutral-600 dark:text-neutral-300", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-[#1E1B4B] dark:bg-white" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Non-Cacheable ",
+              /* @__PURE__ */ jsx("strong", { className: "text-black dark:text-white font-bold", children: "26.3 GB" }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "text-neutral-400 font-normal", children: "(20.3%)" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "pt-1 border-t border-neutral-100 dark:border-white/10 text-neutral-500 font-medium", children: [
+            "Total ",
+            /* @__PURE__ */ jsx("strong", { className: "text-black dark:text-white font-bold", children: "129.6 GB" })
+          ] })
+        ] })
+      ] });
+    // --- OTHER IMAGE COMPONENTS ---
+    case "sales-analytics-dual-bars":
+      return /* @__PURE__ */ jsxs("div", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? "bg-[#18181A] text-white border-white/10" : "bg-[#F9FAFB] text-neutral-900 border-neutral-200 shadow-sm"}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-base font-bold tracking-tight", children: "Sales analytics" }),
+            /* @__PURE__ */ jsx("div", { className: "text-[11px] text-neutral-400 font-medium mt-1", children: "Total units sold" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1 mt-0.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-2xl font-black tracking-tight", children: "345" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-neutral-400", children: "/500" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `flex items-center p-0.5 rounded-full border ${isDark ? "bg-white/5 border-white/10" : "bg-neutral-100 border-neutral-200"}`, children: ["Monthly", "Weekly"].map((r) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                triggerHaptic("light");
+                setSalesAnalyticsRange(r);
+              },
+              className: `px-3 py-1 text-[10px] font-bold rounded-full transition-colors cursor-pointer border-0 ${salesAnalyticsRange === r ? isDark ? "bg-white text-black" : "bg-white text-black shadow-xs" : "text-neutral-400 hover:text-white"}`,
+              children: r
+            },
+            r
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: `p-3 rounded-2xl border flex flex-col justify-between h-36 mt-1 ${isDark ? "bg-[#121214] border-white/5" : "bg-white border-neutral-100 shadow-xs"}`, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-[10px] font-bold", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-neutral-600 dark:text-neutral-300", children: [
+              /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-xs bg-[#EA580C]" }),
+              /* @__PURE__ */ jsx("span", { children: "Total Sales" })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-neutral-600 dark:text-neutral-300", children: [
+              /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-xs bg-[#FDBA74]" }),
+              /* @__PURE__ */ jsx("span", { children: "Total Earnings" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between px-2 h-20", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-6 bg-neutral-200/50 dark:bg-neutral-800/40 rounded-lg h-[40%]" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1 h-full", children: [
+              /* @__PURE__ */ jsx(motion.div, { initial: { height: 0 }, animate: { height: "75%" }, transition: { duration: 0.6 }, className: "w-6 bg-[#EA580C] rounded-lg shadow-sm" }),
+              /* @__PURE__ */ jsx(motion.div, { initial: { height: 0 }, animate: { height: "90%" }, transition: { duration: 0.6, delay: 0.1 }, className: "w-6 bg-[#FDBA74] rounded-lg shadow-sm" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "w-6 bg-neutral-200/50 dark:bg-neutral-800/40 rounded-lg h-[55%]" }),
+            /* @__PURE__ */ jsx("div", { className: "w-6 bg-neutral-200/50 dark:bg-neutral-800/40 rounded-lg h-[45%]" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between px-2 text-[9px] font-bold text-neutral-400 uppercase", children: [
+            /* @__PURE__ */ jsx("span", { children: "Sep" }),
+            /* @__PURE__ */ jsx("span", { className: "text-black dark:text-white font-black", children: "Oct" }),
+            /* @__PURE__ */ jsx("span", { children: "Nov" }),
+            /* @__PURE__ */ jsx("span", { children: "Dec" })
+          ] })
+        ] })
+      ] });
+    case "sales-target-segmented-arc":
+      return /* @__PURE__ */ jsxs("div", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? "bg-[#18181A] text-white border-white/10" : "bg-[#F9FAFB] text-neutral-900 border-neutral-200 shadow-sm"}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-base font-bold tracking-tight", children: "Sales target" }),
+          /* @__PURE__ */ jsx("div", { className: `flex items-center p-0.5 rounded-full border ${isDark ? "bg-white/5 border-white/10" : "bg-neutral-100 border-neutral-200"}`, children: ["Monthly", "Yearly"].map((r) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                triggerHaptic("light");
+                setSalesTargetRange(r);
+              },
+              className: `px-3 py-1 text-[10px] font-bold rounded-full transition-colors cursor-pointer border-0 ${salesTargetRange === r ? isDark ? "bg-white text-black" : "bg-white text-black shadow-xs" : "text-neutral-400 hover:text-white"}`,
+              children: r
+            },
+            r
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: `p-3 rounded-2xl border flex flex-col items-center justify-between h-44 mt-1 relative overflow-hidden ${isDark ? "bg-[#121214] border-white/5" : "bg-white border-neutral-100 shadow-xs"}`, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-[10px] font-bold w-full justify-start", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-neutral-600 dark:text-neutral-300", children: [
+              /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-[#FDBA74]" }),
+              /* @__PURE__ */ jsx("span", { children: "Property listed" })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-neutral-600 dark:text-neutral-300", children: [
+              /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-[#EA580C]" }),
+              /* @__PURE__ */ jsx("span", { children: "Property delivered" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative w-52 h-28 flex items-center justify-center mt-2", children: [
+            /* @__PURE__ */ jsx("svg", { viewBox: "0 0 200 110", className: "w-full h-full overflow-visible", children: Array.from({ length: 16 }).map((_, i) => {
+              const angle = -180 + i * (180 / 15);
+              const isListed = i < 5;
+              const isDelivered = i >= 5 && i < 12;
+              return /* @__PURE__ */ jsx("g", { transform: `rotate(${angle} 100 100)`, children: /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "93",
+                  y: "10",
+                  width: "14",
+                  height: "28",
+                  rx: "4",
+                  fill: isListed ? "#FDBA74" : isDelivered ? "#EA580C" : isDark ? "#26262B" : "#E5E7EB"
+                }
+              ) }, i);
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: "absolute bottom-1 flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-3xl font-black tracking-tight", children: "70%" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold text-neutral-400", children: "Achieved" })
+            ] })
+          ] })
+        ] })
+      ] });
+    case "sales-overview-radial-dashboard":
+      return /* @__PURE__ */ jsxs("div", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? "bg-[#18181A] text-white border-white/10" : "bg-[#FAFAFA] text-neutral-900 border-neutral-200 shadow-sm"}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-base font-bold tracking-tight", children: "Sales Overview" }),
+          /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-neutral-100 dark:bg-white/10 flex items-center justify-center cursor-pointer", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-4 h-4 text-neutral-500 dark:text-neutral-300" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-[#F3F0FF] dark:bg-[#2E1A47] text-[#6D28D9] dark:text-[#DDD6FE] px-3 py-1.5 rounded-xl text-xs font-bold flex items-center gap-2 my-1", children: [
+          /* @__PURE__ */ jsx(Crown, { className: "w-4 h-4 fill-[#6D28D9] dark:fill-[#DDD6FE]" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "You're the top ",
+            /* @__PURE__ */ jsx("strong", { className: "text-[#4C1D95] dark:text-white", children: "17%" }),
+            " of performers"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-48 h-24 flex items-center justify-center mx-auto my-1", children: [
+          /* @__PURE__ */ jsx("svg", { viewBox: "0 0 200 110", className: "w-full h-full overflow-visible", children: Array.from({ length: 14 }).map((_, i) => {
+            const angle = -180 + i * (180 / 13);
+            const isActive = i < 9;
+            return /* @__PURE__ */ jsx("g", { transform: `rotate(${angle} 100 100)`, children: /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "93",
+                y: "10",
+                width: "14",
+                height: "28",
+                rx: "4",
+                fill: isActive ? "#6366F1" : isDark ? "#26262B" : "#E5E7EB"
+              }
+            ) }, i);
+          }) }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-2xl font-black tracking-tight", children: "67.2%" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold text-neutral-400", children: "sales goals" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 mt-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: `p-2.5 rounded-xl border flex flex-col justify-between ${isDark ? "bg-white/5 border-white/5" : "bg-white border-neutral-200/80 shadow-xs"}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold text-neutral-500", children: "Number of Sales" }),
+              /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 rounded-md bg-[#6366F1]/15 text-[#6366F1] text-[9px] font-bold", children: "3.5% \u2197" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "text-xl font-black tracking-tight mt-1", children: "1,304" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `p-2.5 rounded-xl border flex flex-col justify-between ${isDark ? "bg-white/5 border-white/5" : "bg-white border-neutral-200/80 shadow-xs"}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold text-neutral-500", children: "Total Revenue" }),
+              /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 rounded-md bg-neutral-900 text-white text-[9px] font-bold", children: "4.5% \u2198" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "text-xl font-black tracking-tight mt-1", children: "$21.1K" })
+          ] })
+        ] })
+      ] });
+    case "users-growth-pill-progress":
+      return /* @__PURE__ */ jsxs("div", { className: "w-full h-full p-4 flex flex-col justify-between select-none font-sans bg-[#0E0E10] text-white rounded-[24px] border border-white/10", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Star, { className: "w-5 h-5 fill-white text-white" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tracking-tight", children: "Users growth" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-neutral-700 overflow-hidden border border-white/20", children: /* @__PURE__ */ jsx("img", { src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80", alt: "Avatar", className: "w-full h-full object-cover" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 my-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold text-[#818CF8]", children: "\u2197" }),
+          /* @__PURE__ */ jsx("span", { className: "text-4xl font-black tracking-tight", children: "+88.3%" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-bold text-neutral-400 flex items-center gap-0.5", children: [
+            "+1.78% ",
+            /* @__PURE__ */ jsx(TrendingUp, { className: "w-3 h-3" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2 my-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-full h-9 bg-[#1A1A1E] rounded-full flex items-center p-1", children: /* @__PURE__ */ jsx("div", { className: "w-[45%] h-full bg-white text-black rounded-full flex items-center px-3 text-xs font-bold", children: "12.01" }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-full h-9 bg-[#1A1A1E] rounded-full flex items-center p-1", children: /* @__PURE__ */ jsx("div", { className: "w-[78%] h-full bg-white text-black rounded-full flex items-center px-3 text-xs font-bold", children: "13.01" }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-full h-9 bg-gradient-to-r from-[#2E284A] to-[#A5B4FC] rounded-full flex items-center px-3 text-xs font-bold text-white shadow-md", children: "14.01" })
+        ] })
+      ] });
+    case "overview-bar-scrubber-card":
+      return /* @__PURE__ */ jsxs("div", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? "bg-[#18181A] text-white border-white/10" : "bg-[#FAFAFA] text-neutral-900 border-neutral-200 shadow-sm"}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-base font-bold tracking-tight", children: "Overview" }),
+          /* @__PURE__ */ jsxs("div", { className: `px-3 py-1 rounded-xl text-xs font-semibold flex items-center gap-1 border cursor-pointer ${isDark ? "bg-white/10 border-white/15 text-white" : "bg-white border-neutral-200 text-neutral-700 shadow-xs"}`, children: [
+            /* @__PURE__ */ jsx("span", { children: "Last Month" }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3 text-neutral-400" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 my-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[10px] text-neutral-400 font-semibold uppercase", children: "Avg Per month" }),
+            /* @__PURE__ */ jsxs("div", { className: "text-2xl font-black tracking-tight", children: [
+              "1,860",
+              /* @__PURE__ */ jsx("span", { className: "text-neutral-400 font-normal text-base", children: "/3K" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 rounded-md bg-[#22C55E]/15 text-[#22C55E] text-[10px] font-bold flex items-center gap-0.5", children: "50,2% \u25B2" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-full h-28 my-1 flex items-end justify-between px-1", children: [
+          { month: "Apr", h: "45%" },
+          { month: "May", h: "30%" },
+          { month: "Jun", h: "75%" },
+          { month: "Jul", h: "50%" },
+          { month: "Aug", h: "85%", active: true },
+          { month: "Sep", h: "40%" },
+          { month: "Oct", h: "60%" },
+          { month: "Nov", h: "70%" }
+        ].map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 flex-1 relative", children: [
+          item.active && /* @__PURE__ */ jsxs("div", { className: "absolute -top-11 z-20 flex flex-col items-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "bg-[#1E1E22] text-white text-[10px] font-bold px-2.5 py-1 rounded-xl shadow-xl border border-white/10 text-center", children: [
+              /* @__PURE__ */ jsx("div", { children: "August 2025" }),
+              /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "120 pcs" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-t-[4px] border-t-[#1E1E22]" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `w-7 rounded-2xl relative overflow-hidden flex items-start justify-center ${item.active ? "bg-[#27272A] border-2 border-white/20 shadow-md" : "bg-neutral-200/60 dark:bg-neutral-800/40"}`,
+              style: { height: item.h },
+              children: [
+                /* @__PURE__ */ jsxs("svg", { className: "absolute inset-0 w-full h-full opacity-20", viewBox: "0 0 100 100", preserveAspectRatio: "none", children: [
+                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: `stripe-${i}`, width: "16", height: "16", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("line", { x1: "0", y1: "0", x2: "0", y2: "16", stroke: "#FFFFFF", strokeWidth: "8" }) }) }),
+                  /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#stripe-${i})` })
+                ] }),
+                item.active && /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-white border-2 border-[#27272A] mt-1 z-10" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: `text-[9px] font-bold ${item.active ? "text-black dark:text-white font-black" : "text-neutral-400"}`, children: item.month })
+        ] }, i)) })
+      ] });
+    case "network-telemetry-matrix":
+      return /* @__PURE__ */ jsxs("div", { className: "w-full h-full p-4 flex flex-col justify-between select-none font-mono bg-[#0B0D0E] text-white rounded-[24px] border border-white/10", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-sans font-bold tracking-tight", children: "Network Telemetry" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-neutral-500", children: [
+            /* @__PURE__ */ jsx(Share2, { className: "w-3.5 h-3.5 hover:text-white transition-colors cursor-pointer" }),
+            /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-3.5 h-3.5 hover:text-white transition-colors cursor-pointer" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 my-1", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[8px] font-bold text-neutral-500 uppercase tracking-widest", children: "Average Finality" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1 mt-0.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-2xl font-black font-sans", children: "1.8s" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[9px] font-bold text-[#22C55E] flex items-center gap-0.5", children: "\u2191 14.6%" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[8px] font-bold text-neutral-500 uppercase tracking-widest", children: "Intents Finalized" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1 mt-0.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-2xl font-black font-sans", children: "312,134" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[9px] font-bold text-[#22C55E] flex items-center gap-0.5", children: "\u2191 11.5%" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[8px] font-bold text-neutral-500 tracking-wider", children: [
+            /* @__PURE__ */ jsx("span", { children: "AUGUST / TESTNET V0" }),
+            /* @__PURE__ */ jsx("span", { children: "12,430 INTENTS" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-16 gap-0.5 h-6", children: Array.from({ length: 48 }).map((_, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `w-full h-full rounded-[1px] ${[3, 7, 12, 18, 22, 29, 34, 41, 45].includes(i) ? "bg-[#22C55E]" : "bg-[#142319]"}`
+            },
+            i
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[8px] font-bold text-neutral-500 tracking-wider", children: [
+            /* @__PURE__ */ jsx("span", { children: "SEPTEMBER / V1 SEQUENCER" }),
+            /* @__PURE__ */ jsx("span", { children: "18,916 INTENTS" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-16 gap-0.5 h-6", children: Array.from({ length: 48 }).map((_, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `w-full h-full rounded-[1px] ${[2, 6, 11, 15, 24, 31, 38, 43, 47].includes(i) ? "bg-[#22C55E]" : "bg-[#142319]"}`
+            },
+            i
+          )) })
+        ] })
+      ] });
+    case "progress-indicator-piano":
+      return /* @__PURE__ */ jsxs("div", { className: "w-full h-full p-4 flex flex-col justify-between select-none font-sans bg-[#0E0E10] text-white rounded-[24px] border border-white/10", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-neutral-300", children: "Progress Indicator" }),
+          /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-4 h-4 text-neutral-500 cursor-pointer" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-[11px] text-neutral-400 font-medium my-0.5", children: "You are on track to finish the goal three days early" }),
+        /* @__PURE__ */ jsx("div", { className: "w-full h-px bg-white/10 my-1" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 my-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-3xl font-black tracking-tight", children: "66%" }),
+          /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 rounded-full bg-white/10 text-white text-[10px] font-bold border border-white/15 flex items-center gap-1", children: /* @__PURE__ */ jsx("span", { children: "\u2197 71 avg" }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-500 font-medium", children: "vs. the last period" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 h-12 w-full mt-2", children: Array.from({ length: 28 }).map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `flex-1 h-full rounded-xs transition-colors ${i < 18 ? "bg-white shadow-[0_0_8px_rgba(255,255,255,0.4)]" : "bg-[#26262B]"}`
+          },
+          i
+        )) })
+      ] });
+    case "server-performance-step-bars":
+      return /* @__PURE__ */ jsxs("div", { className: "w-full h-full p-4 flex flex-col justify-between select-none font-sans bg-[#0E0E10] text-white rounded-[24px] border border-white/10", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-neutral-400", children: "Server Performance Metrics" }),
+          /* @__PURE__ */ jsx(ArrowUpRight, { className: "w-4 h-4 text-neutral-400" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-4xl font-black tracking-tight my-1", children: "+45%" }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-end justify-between gap-1.5 h-20 mt-2 px-1", children: [15, 22, 30, 45, 58, 72, 90].map((h, i) => /* @__PURE__ */ jsx("div", { className: "flex-1 bg-[#222226] rounded-t-sm relative overflow-hidden flex flex-col justify-end", style: { height: `${h}%` }, children: /* @__PURE__ */ jsx("div", { className: "w-full h-1 bg-white" }) }, i)) })
+      ] });
+    case "credit-score-barcode-meter":
+      return /* @__PURE__ */ jsxs("div", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? "bg-[#18181A] text-white border-white/10" : "bg-[#FAFAFA] text-neutral-900 border-neutral-200 shadow-sm"}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-base font-bold tracking-tight", children: "Credit Score" }),
+            /* @__PURE__ */ jsx("div", { className: "text-[11px] text-neutral-400 font-medium", children: "Your current credit rating." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `px-3 py-1 rounded-xl text-xs font-semibold flex items-center gap-1 border cursor-pointer ${isDark ? "bg-white/10 border-white/15 text-white" : "bg-white border-neutral-200 text-neutral-700 shadow-xs"}`, children: [
+            /* @__PURE__ */ jsx("span", { children: "Weekly" }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3 text-neutral-400" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 my-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-4xl font-black tracking-tight", children: [
+            "88",
+            /* @__PURE__ */ jsx("span", { className: "text-neutral-400 font-normal text-2xl", children: "/100" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold text-[#22C55E]", children: "\u25B2 13.6%" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-neutral-400 font-medium", children: "vs last month" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-1 h-9 w-full mt-2", children: Array.from({ length: 42 }).map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `w-1 h-full rounded-full ${i < 36 ? "bg-[#22C55E]" : isDark ? "bg-white/10" : "bg-neutral-200"}`
+          },
+          i
+        )) })
+      ] });
+    case "views-hourly-wave-chart":
+      return /* @__PURE__ */ jsxs("div", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? "bg-[#18181A] text-white border-white/10" : "bg-white text-neutral-900 border-neutral-200 shadow-sm"}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-base font-bold tracking-tight", children: "Views" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5 mt-0.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-3xl font-black tracking-tight", children: "12.7K" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-[#22C55E]", children: "\u2197 2.6%" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[9px] text-neutral-400 font-bold uppercase", children: "VS PREV. DAY" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `flex items-center p-0.5 rounded-xl border ${isDark ? "bg-white/5 border-white/10" : "bg-neutral-100 border-neutral-200"}`, children: ["Day", "Week", "Month"].map((p) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                triggerHaptic("light");
+                setViewsRange(p);
+              },
+              className: `px-2.5 py-1 text-[10px] font-bold rounded-lg transition-colors cursor-pointer border-0 ${viewsRange === p ? isDark ? "bg-white text-black" : "bg-white text-black shadow-xs" : "text-neutral-400 hover:text-white"}`,
+              children: p
+            },
+            p
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-full h-20 my-1", children: /* @__PURE__ */ jsxs("svg", { className: "w-full h-full overflow-visible", preserveAspectRatio: "none", viewBox: "0 0 100 40", children: [
+          /* @__PURE__ */ jsx("line", { x1: "0", y1: "20", x2: "100", y2: "20", stroke: "#F59E0B", strokeWidth: "1", strokeDasharray: "3 3" }),
+          /* @__PURE__ */ jsx("text", { x: "92", y: "18", fill: "#F59E0B", fontSize: "4", fontWeight: "bold", children: "AVG" }),
+          /* @__PURE__ */ jsx("path", { d: "M0,25 Q15,30 25,12 T50,15 T75,18 T100,28 L100,40 L0,40 Z", fill: "url(#blue-wave-grad)", opacity: "0.25" }),
+          /* @__PURE__ */ jsx(
+            motion.path,
+            {
+              d: "M0,25 Q15,30 25,12 T50,15 T75,18 T100,28",
+              fill: "none",
+              stroke: "#3B82F6",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              initial: { pathLength: 0 },
+              animate: { pathLength: 1 },
+              transition: { duration: 0.8 }
+            }
+          ),
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "blue-wave-grad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#3B82F6", stopOpacity: "0.6" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#3B82F6", stopOpacity: "0.0" })
+          ] }) })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[9px] font-bold text-neutral-400 uppercase px-1", children: [
+          /* @__PURE__ */ jsx("span", { children: "12 AM" }),
+          /* @__PURE__ */ jsx("span", { children: "4 AM" }),
+          /* @__PURE__ */ jsx("span", { children: "8 AM" }),
+          /* @__PURE__ */ jsx("span", { children: "12 PM" }),
+          /* @__PURE__ */ jsx("span", { children: "4 PM" }),
+          /* @__PURE__ */ jsx("span", { children: "8 PM" })
+        ] })
+      ] });
+    case "timer-preparation-segmented":
+      return /* @__PURE__ */ jsxs("div", { className: "w-full h-full p-4 flex flex-col justify-between select-none font-sans bg-[#12141A] text-white rounded-[24px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-4xl font-black tracking-tight leading-none font-sans", children: "25:04" }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-neutral-400 mt-1", children: "Left for preparation" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full bg-[#1A3660] text-[#3B82F6] flex items-center justify-center border border-[#2563EB]/30", children: /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 stroke-[3]" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative pt-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-0 right-3 transform -translate-y-full flex flex-col items-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "bg-[#2563EB] text-white text-[11px] font-bold px-3 py-1 rounded-full shadow-lg flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "w-3.5 h-3.5 rounded-full bg-white text-[#2563EB] text-[9px] font-black flex items-center justify-center", children: "1" }),
+              /* @__PURE__ */ jsx("span", { children: "Preparation" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] border-t-[#2563EB]" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative w-full h-11 bg-[#1A2333] rounded-xl p-1 flex items-center justify-between gap-1 overflow-hidden", children: [
+            [1, 2, 3].map((seg) => /* @__PURE__ */ jsx("div", { className: "flex-1 h-full bg-[#121B2B] rounded-lg" }, seg)),
+            /* @__PURE__ */ jsx("div", { className: "relative flex-1 h-full bg-[#2563EB] rounded-lg overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ jsxs("svg", { className: "absolute inset-0 w-full h-full opacity-30", viewBox: "0 0 100 100", preserveAspectRatio: "none", children: [
+              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: "stripes", width: "20", height: "20", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("line", { x1: "0", y1: "0", x2: "0", y2: "20", stroke: "#FFFFFF", strokeWidth: "10" }) }) }),
+              /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "url(#stripes)" })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: "absolute top-0 bottom-0 right-10 w-0.5 bg-white shadow-[0_0_8px_rgba(255,255,255,0.8)] z-10" })
+          ] })
+        ] })
+      ] });
+    case "noise-decibel-level":
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            triggerHaptic("light");
+            setDecibelLevel(decibelLevel === 40 ? 60 : 40);
+          },
+          className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] cursor-pointer transition-colors duration-300 ${isDark ? "bg-[#18181A] text-white border border-white/10" : "bg-[#EAEBED] text-neutral-900"}`,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-neutral-400", children: "Current noise level" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1 h-4", children: [
+                /* @__PURE__ */ jsx("div", { className: `w-1 rounded-full ${decibelLevel === 40 ? "h-2 bg-[#22C55E]" : "h-2 bg-[#EAB308]"}` }),
+                /* @__PURE__ */ jsx("div", { className: `w-1 rounded-full ${decibelLevel === 40 ? "h-3 bg-[#22C55E]" : "h-3 bg-[#EAB308]"}` }),
+                /* @__PURE__ */ jsx("div", { className: `w-1 rounded-full ${decibelLevel === 40 ? "h-4 bg-[#22C55E]" : "h-4 bg-[#EAB308]"}` })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1 my-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-5xl font-black tracking-tight leading-none font-sans", children: decibelLevel }),
+              /* @__PURE__ */ jsx("span", { className: "text-base font-bold text-neutral-400", children: "dB" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[11px] font-semibold text-neutral-400 px-0.5 mb-1", children: [
+              /* @__PURE__ */ jsx("span", { children: "Low" }),
+              /* @__PURE__ */ jsx("span", { children: "High" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: `relative flex-1 h-12 rounded-2xl flex items-center justify-start px-4 overflow-hidden ${decibelLevel === 40 ? "bg-[#22C55E] text-white shadow-md" : "bg-[#EAB308] text-white shadow-md"}`, children: [
+                /* @__PURE__ */ jsxs("svg", { className: "absolute inset-0 w-full h-full opacity-25", viewBox: "0 0 100 100", preserveAspectRatio: "none", children: [
+                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: "db-stripes", width: "16", height: "16", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("line", { x1: "0", y1: "0", x2: "0", y2: "16", stroke: "#FFFFFF", strokeWidth: "8" }) }) }),
+                  /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "url(#db-stripes)" })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "relative z-10 text-base font-black font-sans", children: decibelLevel })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "w-1 h-8 bg-neutral-400/40 rounded-full" }),
+              /* @__PURE__ */ jsx("div", { className: `flex-1 h-12 rounded-2xl flex items-center justify-end px-4 font-black text-base font-sans ${isDark ? "bg-white/10 text-neutral-400" : "bg-neutral-300/80 text-neutral-500"}`, children: "120" })
+            ] })
+          ]
+        }
+      );
+    // --- MONOCHROMATIC COMPONENTS ---
+    case "mono-stock":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 font-bold text-[10px] tracking-wider uppercase opacity-60", children: [
+              /* @__PURE__ */ jsx("span", { children: "AAPL" }),
+              /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-white animate-pulse" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "text-2xl font-black tracking-tight mt-0.5", children: "$182.40" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[10px] font-bold opacity-80 mt-0.5", children: [
+              /* @__PURE__ */ jsx(TrendingUp, { className: "w-3 h-3" }),
+              /* @__PURE__ */ jsx("span", { children: "+$4.15 (+2.33%)" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `flex items-center p-0.5 rounded-full border ${isDark ? "bg-neutral-900 border-white/10" : "bg-neutral-100 border-black/10"}`, children: ["1D", "1W", "1M", "1Y"].map((r) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                triggerHaptic("light");
+                setStockRange(r);
+              },
+              className: `px-2 py-0.5 text-[9px] font-bold rounded-full transition-colors cursor-pointer border-0 ${stockRange === r ? isDark ? "bg-white text-black" : "bg-black text-white" : isDark ? "text-neutral-400 hover:text-white" : "text-neutral-600 hover:text-black"}`,
+              children: r
+            },
+            r
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-full h-16 mt-2", children: /* @__PURE__ */ jsxs("svg", { className: "w-full h-full overflow-visible", preserveAspectRatio: "none", viewBox: "0 0 100 40", children: [
+          /* @__PURE__ */ jsx("path", { d: "M0,30 Q15,10 30,25 T60,15 T90,5 L100,2 L100,40 L0,40 Z", fill: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)" }),
+          /* @__PURE__ */ jsx(
+            motion.path,
+            {
+              d: "M0,30 Q15,10 30,25 T60,15 T90,5 L100,2",
+              fill: "none",
+              stroke: isDark ? "#FFFFFF" : "#000000",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              initial: { pathLength: 0 },
+              animate: { pathLength: 1 },
+              transition: { duration: 0.8 }
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { cx: "100", cy: "2", r: "3", fill: isDark ? "#FFFFFF" : "#000000" })
+        ] }) })
+      ] });
+    case "mono-revenue":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[10px] font-bold opacity-50 uppercase tracking-wider", children: "Revenue Stream" }),
+            /* @__PURE__ */ jsx("div", { className: "text-2xl font-black mt-0.5", children: "$94,820.00" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `p-2 rounded-xl border ${isDark ? "bg-white/5 border-white/10 text-white" : "bg-black/5 border-black/10 text-black"}`, children: /* @__PURE__ */ jsx(Zap, { className: "w-4 h-4" }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-full h-16 mt-2", children: /* @__PURE__ */ jsxs("svg", { className: "w-full h-full overflow-visible", preserveAspectRatio: "none", viewBox: "0 0 100 40", children: [
+          /* @__PURE__ */ jsx("path", { d: "M0,35 Q20,10 40,20 T80,5 L100,12 L100,40 L0,40 Z", fill: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)" }),
+          /* @__PURE__ */ jsx(
+            motion.path,
+            {
+              d: "M0,35 Q20,10 40,20 T80,5 L100,12",
+              fill: "none",
+              stroke: isDark ? "#FFFFFF" : "#000000",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              initial: { pathLength: 0 },
+              animate: { pathLength: 1 },
+              transition: { duration: 0.8 }
+            }
+          )
+        ] }) })
+      ] });
+    case "mono-credit":
+      return /* @__PURE__ */ jsxs("div", { className: "w-full h-full p-4 flex flex-col items-center justify-center text-center select-none font-sans", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative w-24 h-24 flex items-center justify-center mb-1", children: [
+          /* @__PURE__ */ jsxs("svg", { className: "w-full h-full transform -rotate-90", viewBox: "0 0 36 36", children: [
+            /* @__PURE__ */ jsx("path", { className: isDark ? "text-neutral-800" : "text-neutral-200", strokeWidth: "3.5", stroke: "currentColor", fill: "none", d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" }),
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                className: isDark ? "text-white" : "text-black",
+                strokeWidth: "3.5",
+                strokeDasharray: "78, 100",
+                strokeLinecap: "round",
+                stroke: "currentColor",
+                fill: "none",
+                d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831",
+                initial: { strokeDasharray: "0, 100" },
+                animate: { strokeDasharray: "78, 100" },
+                transition: { duration: 0.8 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("span", { className: `text-xl font-black ${isDark ? "text-white" : "text-black"}`, children: "785" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[8px] font-bold opacity-60 uppercase", children: "Score" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: `text-[9px] font-bold px-2 py-0.5 rounded-full border ${isDark ? "bg-white/10 text-white border-white/20" : "bg-black/10 text-black border-black/20"}`, children: "Excellent Tier" })
+      ] });
+    case "mono-wallet":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Wallet Balance" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: "$24,500.00" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 my-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: `p-2 rounded-xl border ${isDark ? "bg-white/[0.03] border-white/10" : "bg-black/[0.03] border-black/10"}`, children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[9px] font-medium opacity-50", children: "Inflow" }),
+            /* @__PURE__ */ jsx("div", { className: "text-base font-black", children: "+$8,240" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `p-2 rounded-xl border ${isDark ? "bg-white/[0.03] border-white/10" : "bg-black/[0.03] border-black/10"}`, children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[9px] font-medium opacity-50", children: "Outflow" }),
+            /* @__PURE__ */ jsx("div", { className: "text-base font-black", children: "-$2,150" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] opacity-60", children: "Auto-save enabled \xB7 4 cards linked" })
+      ] });
+    case "mono-savings":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Savings Goal" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: "$12,400" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[10px] opacity-60", children: "Target: New House ($15,000)" }),
+          /* @__PURE__ */ jsx("div", { className: `w-full h-2 rounded-full mt-1.5 overflow-hidden ${isDark ? "bg-neutral-800" : "bg-neutral-200"}`, children: /* @__PURE__ */ jsx(motion.div, { initial: { width: 0 }, animate: { width: "82%" }, transition: { duration: 0.7 }, className: `h-full rounded-full ${isDark ? "bg-white" : "bg-black"}` }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] font-medium opacity-60", children: "+ $800 auto-deposit / mo" })
+      ] });
+    case "mono-heatmap":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Activity Heatmap" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono font-bold", children: "342 Commits" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 my-1", children: Array.from({ length: 28 }).map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `w-full aspect-square rounded-xs ${i % 5 === 0 ? isDark ? "bg-white" : "bg-black" : i % 3 === 0 ? isDark ? "bg-neutral-500" : "bg-neutral-400" : isDark ? "bg-neutral-800" : "bg-neutral-200"}`
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] opacity-50", children: "High Activity Matrix" })
+      ] });
+    case "mono-activity-ring":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Activity Rings" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: "3 Goals Hit" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-24 h-24 flex items-center justify-center mx-auto my-1", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "absolute inset-0 w-full h-full transform -rotate-90", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "42", className: isDark ? "text-neutral-800" : "text-neutral-200", strokeWidth: "4", stroke: "currentColor", fill: "none" }),
+            /* @__PURE__ */ jsx(motion.circle, { cx: "50", cy: "50", r: "42", className: isDark ? "text-white" : "text-black", strokeWidth: "4", strokeLinecap: "round", stroke: "currentColor", fill: "none", strokeDasharray: "263.8", strokeDashoffset: "52.7" })
+          ] }),
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "absolute inset-0 w-full h-full transform -rotate-90", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "32", className: isDark ? "text-neutral-800" : "text-neutral-200", strokeWidth: "4", stroke: "currentColor", fill: "none" }),
+            /* @__PURE__ */ jsx(motion.circle, { cx: "50", cy: "50", r: "32", className: isDark ? "text-neutral-400" : "text-neutral-600", strokeWidth: "4", strokeLinecap: "round", stroke: "currentColor", fill: "none", strokeDasharray: "201", strokeDashoffset: "40.2" })
+          ] }),
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "absolute inset-0 w-full h-full transform -rotate-90", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "22", className: isDark ? "text-neutral-800" : "text-neutral-200", strokeWidth: "4", stroke: "currentColor", fill: "none" }),
+            /* @__PURE__ */ jsx(motion.circle, { cx: "50", cy: "50", r: "22", className: isDark ? "text-neutral-600" : "text-neutral-400", strokeWidth: "4", strokeLinecap: "round", stroke: "currentColor", fill: "none", strokeDasharray: "138.2", strokeDashoffset: "27.6" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-black", children: "88%" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-around text-[10px] font-semibold opacity-70", children: [
+          /* @__PURE__ */ jsx("span", { children: "Move" }),
+          " \xB7 ",
+          /* @__PURE__ */ jsx("span", { children: "Exercise" }),
+          " \xB7 ",
+          /* @__PURE__ */ jsx("span", { children: "Stand" })
+        ] })
+      ] });
+    case "mono-users":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Active Users (MAU)" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: "+12.4%" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-3xl font-black", children: "48.2k" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[10px] opacity-70", children: [
+          /* @__PURE__ */ jsx("span", { className: `px-1.5 py-0.5 rounded font-semibold ${isDark ? "bg-white/10 text-white" : "bg-black/10 text-black"}`, children: "US 54%" }),
+          /* @__PURE__ */ jsx("span", { className: `px-1.5 py-0.5 rounded font-semibold ${isDark ? "bg-white/10 text-white" : "bg-black/10 text-black"}`, children: "EU 32%" })
+        ] })
+      ] });
+    case "mono-kfactor":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Viral K-Factor Arc" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: "K = 1.42" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-24 h-24 flex items-center justify-center mx-auto my-1", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", className: "w-full h-full transform -rotate-90", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "14", className: isDark ? "text-neutral-800" : "text-neutral-200", strokeWidth: "3.5", stroke: "currentColor", fill: "none" }),
+            /* @__PURE__ */ jsx(
+              motion.circle,
+              {
+                cx: "18",
+                cy: "18",
+                r: "14",
+                className: isDark ? "text-white" : "text-black",
+                strokeWidth: "3.5",
+                strokeLinecap: "round",
+                stroke: "currentColor",
+                fill: "none",
+                strokeDasharray: "88",
+                strokeDashoffset: "26",
+                initial: { strokeDashoffset: 88 },
+                animate: { strokeDashoffset: 26 },
+                transition: { duration: 1 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-lg font-black", children: "1.42x" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[8px] font-bold opacity-60 uppercase", children: "Growth" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] text-center opacity-60", children: "Exponential referral multiplier" })
+      ] });
+    case "mono-latency":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Latency P99" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-mono font-bold", children: "1.8ms" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "my-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-2xl font-black", children: "1.8s Avg" }),
+          /* @__PURE__ */ jsx("div", { className: "text-[10px] opacity-50", children: "P99: 3.6s \xB7 P95: 0.4s" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-10 w-full mt-1", children: /* @__PURE__ */ jsx("svg", { className: "w-full h-full overflow-visible", preserveAspectRatio: "none", viewBox: "0 0 100 30", children: /* @__PURE__ */ jsx("path", { d: "M0,20 L20,25 L40,15 L60,25 L80,10 L100,5", fill: "none", stroke: isDark ? "#FFFFFF" : "#000000", strokeWidth: "2.5", strokeLinecap: "round" }) }) })
+      ] });
+    case "mono-bandwidth":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Bandwidth Speed Dial" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-mono font-bold", children: "1.2 Gbps" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full h-16 flex items-center justify-center my-1", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 50", className: "w-full h-full overflow-visible", children: [
+            /* @__PURE__ */ jsx("path", { d: "M 10 50 A 40 40 0 0 1 90 50", fill: "none", stroke: isDark ? "#262626" : "#E5E5E5", strokeWidth: "8", strokeLinecap: "round" }),
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                d: "M 10 50 A 40 40 0 0 1 90 50",
+                fill: "none",
+                stroke: isDark ? "#FFFFFF" : "#000000",
+                strokeWidth: "8",
+                strokeLinecap: "round",
+                strokeDasharray: "125.6",
+                strokeDashoffset: "25",
+                initial: { strokeDashoffset: 125.6 },
+                animate: { strokeDashoffset: 25 },
+                transition: { duration: 1 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-1 flex flex-col items-center", children: /* @__PURE__ */ jsx("span", { className: "text-lg font-black", children: "840 Mbps" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[10px] font-mono opacity-60", children: [
+          /* @__PURE__ */ jsx("span", { children: "Latency: 1.2ms" }),
+          /* @__PURE__ */ jsx("span", { children: "Packet Loss: 0%" })
+        ] })
+      ] });
+    case "mono-server":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Dual Arc Server Gauge" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: "Normal" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-around my-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative w-20 h-20 flex items-center justify-center", children: [
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", className: "w-full h-full transform -rotate-90", children: [
+              /* @__PURE__ */ jsx("path", { className: isDark ? "text-neutral-800" : "text-neutral-200", strokeWidth: "4", stroke: "currentColor", fill: "none", d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" }),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  className: isDark ? "text-white" : "text-black",
+                  strokeWidth: "4",
+                  strokeDasharray: "32, 100",
+                  strokeLinecap: "round",
+                  stroke: "currentColor",
+                  fill: "none",
+                  d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831",
+                  initial: { strokeDasharray: "0, 100" },
+                  animate: { strokeDasharray: "32, 100" },
+                  transition: { duration: 0.8 }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "absolute flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-black", children: "32%" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[8px] font-bold opacity-60 uppercase", children: "CPU" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative w-20 h-20 flex items-center justify-center", children: [
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", className: "w-full h-full transform -rotate-90", children: [
+              /* @__PURE__ */ jsx("path", { className: isDark ? "text-neutral-800" : "text-neutral-200", strokeWidth: "4", stroke: "currentColor", fill: "none", d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" }),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  className: isDark ? "text-neutral-400" : "text-neutral-600",
+                  strokeWidth: "4",
+                  strokeDasharray: "64, 100",
+                  strokeLinecap: "round",
+                  stroke: "currentColor",
+                  fill: "none",
+                  d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831",
+                  initial: { strokeDasharray: "0, 100" },
+                  animate: { strokeDasharray: "64, 100" },
+                  transition: { duration: 0.8, delay: 0.1 }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "absolute flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-black", children: "64%" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[8px] font-bold opacity-60 uppercase", children: "RAM" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-around text-[10px] font-mono opacity-60", children: [
+          /* @__PURE__ */ jsx("span", { children: "Nodes: 8 Active" }),
+          /* @__PURE__ */ jsx("span", { children: "Heap: 4.2 GB" })
+        ] })
+      ] });
+    case "mono-progress":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Circular Build Ring" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: "Building..." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-24 h-24 flex items-center justify-center mx-auto my-1", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", className: "w-full h-full transform -rotate-90", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "14", className: isDark ? "text-neutral-800" : "text-neutral-200", strokeWidth: "3", stroke: "currentColor", fill: "none" }),
+            /* @__PURE__ */ jsx(
+              motion.circle,
+              {
+                cx: "18",
+                cy: "18",
+                r: "14",
+                className: isDark ? "text-white" : "text-black",
+                strokeWidth: "3",
+                strokeLinecap: "round",
+                stroke: "currentColor",
+                fill: "none",
+                strokeDasharray: "88",
+                strokeDashoffset: "22",
+                initial: { strokeDashoffset: 88 },
+                animate: { strokeDashoffset: 22 },
+                transition: { duration: 1 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xl font-black", children: "75%" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[8px] font-semibold opacity-60", children: "Stage 3/4" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] text-center opacity-60", children: "Compiling bundle chunks..." })
+      ] });
+    case "mono-radar":
+      return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Incident Radar Arc" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-bold flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: `w-2 h-2 rounded-full animate-ping ${isDark ? "bg-white" : "bg-black"}` }),
+            /* @__PURE__ */ jsx("span", { children: "Scanning" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full h-16 flex items-center justify-center my-1", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 50", className: "w-full h-full overflow-visible", children: [
+            /* @__PURE__ */ jsx("path", { d: "M 10 50 A 40 40 0 0 1 90 50", fill: "none", stroke: isDark ? "#262626" : "#E5E5E5", strokeWidth: "6", strokeLinecap: "round" }),
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                d: "M 10 50 A 40 40 0 0 1 90 50",
+                fill: "none",
+                stroke: isDark ? "#FFFFFF" : "#000000",
+                strokeWidth: "6",
+                strokeLinecap: "round",
+                strokeDasharray: "125.6",
+                strokeDashoffset: "0",
+                initial: { strokeDashoffset: 125.6 },
+                animate: { strokeDashoffset: 0 },
+                transition: { duration: 1 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-1 flex flex-col items-center", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-black", children: "Zero Criticals" }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] opacity-60 text-center", children: "Monitored 24/7 \xB7 0 Open Alerts" })
+      ] });
+    case "mono-timer-arc":
+      return /* @__PURE__ */ jsxs("div", { className: "w-full h-full p-4 flex flex-col items-center justify-between select-none font-sans", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Focus Arc Gauge" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-mono font-bold", children: "25:00" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-28 h-28 flex items-center justify-center my-1", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "w-full h-full transform -rotate-90", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "40", className: isDark ? "text-neutral-800" : "text-neutral-200", strokeWidth: "8", stroke: "currentColor", fill: "none" }),
+            /* @__PURE__ */ jsx(
+              motion.circle,
+              {
+                cx: "50",
+                cy: "50",
+                r: "40",
+                className: isDark ? "text-white" : "text-black",
+                strokeWidth: "8",
+                strokeLinecap: "round",
+                stroke: "currentColor",
+                fill: "none",
+                strokeDasharray: "251.2",
+                strokeDashoffset: "62.8",
+                initial: { strokeDashoffset: 62.8 },
+                animate: { strokeDashoffset: 62.8 },
+                transition: { duration: 1.2 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("span", { className: `text-xl font-black ${isDark ? "text-white" : "text-black"}`, children: "18:42" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold opacity-60 uppercase tracking-widest", children: "Remaining" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              triggerHaptic("medium");
+              setTimerActive(!timerActive);
+            },
+            className: `px-4 py-1 text-xs font-bold rounded-full border-0 cursor-pointer ${isDark ? "bg-white text-black" : "bg-black text-white"}`,
+            children: timerActive ? "Pause" : "Start Focus"
+          }
+        )
+      ] });
+    case "mono-timer-ring":
+    default:
+      return /* @__PURE__ */ jsxs("div", { className: "w-full h-full p-4 flex flex-col items-center justify-between select-none font-sans", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold opacity-60", children: "Concentric Ring Timer" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: "Deep Work" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-28 h-28 flex items-center justify-center", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "absolute inset-0 w-full h-full transform -rotate-90", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "42", className: isDark ? "text-neutral-800" : "text-neutral-200", strokeWidth: "5", stroke: "currentColor", fill: "none" }),
+            /* @__PURE__ */ jsx(
+              motion.circle,
+              {
+                cx: "50",
+                cy: "50",
+                r: "42",
+                className: isDark ? "text-white" : "text-black",
+                strokeWidth: "5",
+                strokeLinecap: "round",
+                stroke: "currentColor",
+                fill: "none",
+                strokeDasharray: "263.8",
+                strokeDashoffset: "65.9",
+                initial: { strokeDashoffset: 263.8 },
+                animate: { strokeDashoffset: 65.9 },
+                transition: { duration: 1 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "absolute inset-0 w-full h-full transform -rotate-90", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "32", className: isDark ? "text-neutral-800" : "text-neutral-200", strokeWidth: "5", stroke: "currentColor", fill: "none" }),
+            /* @__PURE__ */ jsx(
+              motion.circle,
+              {
+                cx: "50",
+                cy: "50",
+                r: "32",
+                className: isDark ? "text-neutral-400" : "text-neutral-600",
+                strokeWidth: "5",
+                strokeLinecap: "round",
+                stroke: "currentColor",
+                fill: "none",
+                strokeDasharray: "201",
+                strokeDashoffset: "40.2",
+                initial: { strokeDashoffset: 201 },
+                animate: { strokeDashoffset: 40.2 },
+                transition: { duration: 1, delay: 0.2 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("span", { className: `text-lg font-black ${isDark ? "text-white" : "text-black"}`, children: "75%" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[9px] font-bold opacity-60", children: "Goal" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-[10px] font-semibold opacity-70", children: [
+          /* @__PURE__ */ jsx("span", { children: "Focus 45m" }),
+          " \xB7 ",
+          /* @__PURE__ */ jsx("span", { children: "Break 15m" })
+        ] })
+      ] });
+  }
+};
+export {
+  AnimatedMetricCard
+};