@litemetrics/ui 0.1.1

package/dist/index.js

@@ -0,0 +1,1050 @@
+import "./chunk-CBT6H723.js";
+
+// src/theme/index.ts
+var KEY_TO_VAR = {
+  bg: "--lm-bg",
+  bgSecondary: "--lm-bg-secondary",
+  bgTertiary: "--lm-bg-tertiary",
+  border: "--lm-border",
+  borderHover: "--lm-border-hover",
+  text: "--lm-text",
+  textSecondary: "--lm-text-secondary",
+  textTertiary: "--lm-text-tertiary",
+  textMuted: "--lm-text-muted",
+  accent: "--lm-accent",
+  accentLight: "--lm-accent-light",
+  accentText: "--lm-accent-text",
+  accentHover: "--lm-accent-hover",
+  positive: "--lm-positive",
+  negative: "--lm-negative",
+  chartStroke: "--lm-chart-stroke",
+  chartFill: "--lm-chart-fill",
+  chartGrid: "--lm-chart-grid",
+  chartAxis: "--lm-chart-axis",
+  tooltipBg: "--lm-tooltip-bg",
+  tooltipText: "--lm-tooltip-text",
+  tooltipMuted: "--lm-tooltip-muted",
+  bar: "--lm-bar",
+  barHover: "--lm-bar-hover",
+  pie1: "--lm-pie-1",
+  pie2: "--lm-pie-2",
+  pie3: "--lm-pie-3",
+  pie4: "--lm-pie-4",
+  pie5: "--lm-pie-5",
+  pie6: "--lm-pie-6",
+  pie7: "--lm-pie-7",
+  pie8: "--lm-pie-8",
+  mapEmpty: "--lm-map-empty",
+  mapStroke: "--lm-map-stroke",
+  mapHover: "--lm-map-hover"
+};
+var defaultTheme = {
+  bg: "255 255 255",
+  bgSecondary: "250 250 250",
+  bgTertiary: "244 244 245",
+  border: "228 228 231",
+  borderHover: "212 212 216",
+  text: "24 24 27",
+  textSecondary: "113 113 122",
+  textTertiary: "161 161 170",
+  textMuted: "212 212 216",
+  accent: "99 102 241",
+  accentLight: "238 242 255",
+  accentText: "67 56 202",
+  accentHover: "129 140 248",
+  positive: "5 150 105",
+  negative: "239 68 68",
+  chartStroke: "99 102 241",
+  chartFill: "99 102 241",
+  chartGrid: "244 244 245",
+  chartAxis: "161 161 170",
+  tooltipBg: "24 24 27",
+  tooltipText: "255 255 255",
+  tooltipMuted: "161 161 170",
+  bar: "238 242 255",
+  barHover: "224 231 255",
+  pie1: "99 102 241",
+  pie2: "139 92 246",
+  pie3: "59 130 246",
+  pie4: "20 184 166",
+  pie5: "16 185 129",
+  pie6: "245 158 11",
+  pie7: "239 68 68",
+  pie8: "236 72 153",
+  mapEmpty: "244 244 245",
+  mapStroke: "228 228 231",
+  mapHover: "129 140 248"
+};
+var darkTheme = {
+  bg: "24 24 27",
+  bgSecondary: "39 39 42",
+  bgTertiary: "63 63 70",
+  border: "63 63 70",
+  borderHover: "82 82 91",
+  text: "244 244 245",
+  textSecondary: "161 161 170",
+  textTertiary: "113 113 122",
+  textMuted: "82 82 91",
+  accent: "129 140 248",
+  accentLight: "30 27 75",
+  accentText: "165 180 252",
+  accentHover: "165 180 252",
+  positive: "52 211 153",
+  negative: "248 113 113",
+  chartStroke: "129 140 248",
+  chartFill: "129 140 248",
+  chartGrid: "63 63 70",
+  chartAxis: "113 113 122",
+  tooltipBg: "244 244 245",
+  tooltipText: "24 24 27",
+  tooltipMuted: "113 113 122",
+  bar: "30 27 75",
+  barHover: "49 46 129",
+  pie1: "129 140 248",
+  pie2: "167 139 250",
+  pie3: "96 165 250",
+  pie4: "45 212 191",
+  pie5: "52 211 153",
+  pie6: "251 191 36",
+  pie7: "248 113 113",
+  pie8: "244 114 182",
+  mapEmpty: "39 39 42",
+  mapStroke: "63 63 70",
+  mapHover: "165 180 252"
+};
+function themeToCSS(theme) {
+  return Object.entries(theme).filter(([, v]) => v !== void 0).map(([key, value]) => `${KEY_TO_VAR[key]}: ${value};`).join("\n  ");
+}
+function buildStyleSheet(light, dark) {
+  const mergedLight = { ...defaultTheme, ...light };
+  const mergedDark = { ...darkTheme, ...dark };
+  return `:root, .litemetrics-light {
+  ${themeToCSS(mergedLight)}
+}
+
+.dark, .litemetrics-dark {
+  ${themeToCSS(mergedDark)}
+}`;
+}
+var STYLE_ID = "litemetrics-ui-theme";
+
+// src/context/LitemetricsUIContext.tsx
+import { createContext } from "react";
+var LitemetricsUIContext = createContext(null);
+
+// src/context/LitemetricsProvider.tsx
+import { useState, useMemo, useEffect } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createClient } from "@litemetrics/client";
+import { jsx } from "react/jsx-runtime";
+function LitemetricsProvider({
+  baseUrl,
+  siteId,
+  secretKey,
+  defaultPeriod = "7d",
+  queryClient: externalQueryClient,
+  staleTime = 3e4,
+  theme,
+  darkTheme: darkThemeProp,
+  children
+}) {
+  const [period, setPeriod] = useState(defaultPeriod);
+  const [dateFrom, setDateFrom] = useState("");
+  const [dateTo, setDateTo] = useState("");
+  const client = useMemo(
+    () => createClient({ baseUrl, siteId, secretKey }),
+    [baseUrl, siteId, secretKey]
+  );
+  const internalQueryClient = useMemo(
+    () => new QueryClient({ defaultOptions: { queries: { staleTime } } }),
+    [staleTime]
+  );
+  const queryClient = externalQueryClient ?? internalQueryClient;
+  useEffect(() => {
+    const css = buildStyleSheet(theme, darkThemeProp);
+    let el = document.getElementById(STYLE_ID);
+    if (!el) {
+      el = document.createElement("style");
+      el.id = STYLE_ID;
+      document.head.appendChild(el);
+    }
+    el.textContent = css;
+    return () => {
+      el?.remove();
+    };
+  }, [theme, darkThemeProp]);
+  const value = useMemo(
+    () => ({ client, siteId, period, setPeriod, dateFrom, setDateFrom, dateTo, setDateTo, staleTime }),
+    [client, siteId, period, dateFrom, dateTo, staleTime]
+  );
+  const content = /* @__PURE__ */ jsx(LitemetricsUIContext.Provider, { value, children });
+  if (externalQueryClient) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: content });
+}
+
+// src/hooks/queryKeys.ts
+var PREFIX = "litemetrics-ui";
+var queryKeys = {
+  stats: (siteId, metric, period, dateFrom, dateTo) => [PREFIX, "stats", siteId, metric, period, dateFrom, dateTo],
+  timeSeries: (siteId, metric, period) => [PREFIX, "timeSeries", siteId, metric, period],
+  overview: (siteId, period, dateFrom, dateTo) => [PREFIX, "overview", siteId, period, dateFrom, dateTo],
+  worldMap: (siteId, period) => [PREFIX, "worldMap", siteId, period]
+};
+
+// src/hooks/useLitemetricsUI.ts
+import { useContext } from "react";
+function useLitemetricsUI() {
+  const ctx = useContext(LitemetricsUIContext);
+  if (!ctx) {
+    throw new Error("useLitemetricsUI must be used within a <LitemetricsProvider>");
+  }
+  return ctx;
+}
+
+// src/hooks/useStats.ts
+import { useQuery } from "@tanstack/react-query";
+function useStats(metric, options) {
+  const { client, siteId, period: ctxPeriod, dateFrom, dateTo, staleTime } = useLitemetricsUI();
+  const period = options?.period ?? ctxPeriod;
+  const statsOptions = period === "custom" && dateFrom && dateTo ? { period, dateFrom: new Date(dateFrom).toISOString(), dateTo: (/* @__PURE__ */ new Date(dateTo + "T23:59:59")).toISOString(), limit: options?.limit, compare: true } : { period, limit: options?.limit, compare: true };
+  return useQuery({
+    queryKey: queryKeys.stats(siteId, metric, period, dateFrom, dateTo),
+    queryFn: async () => {
+      client.setSiteId(siteId);
+      return client.getStats(metric, statsOptions);
+    },
+    staleTime,
+    enabled: options?.enabled !== false && (period !== "custom" || !!dateFrom && !!dateTo)
+  });
+}
+
+// src/hooks/useTimeSeries.ts
+import { useQuery as useQuery2 } from "@tanstack/react-query";
+function useTimeSeries(metric, options) {
+  const { client, siteId, period: ctxPeriod, staleTime } = useLitemetricsUI();
+  const period = options?.period ?? ctxPeriod;
+  return useQuery2({
+    queryKey: queryKeys.timeSeries(siteId, metric, period),
+    queryFn: async () => {
+      client.setSiteId(siteId);
+      return client.getTimeSeries(metric, { period });
+    },
+    staleTime,
+    enabled: options?.enabled !== false
+  });
+}
+
+// src/hooks/useOverview.ts
+import { useQuery as useQuery3 } from "@tanstack/react-query";
+function useOverview(options) {
+  const { client, siteId, period: ctxPeriod, dateFrom, dateTo, staleTime } = useLitemetricsUI();
+  const period = options?.period ?? ctxPeriod;
+  const metrics2 = options?.metrics ?? ["pageviews", "visitors", "sessions", "events"];
+  const statsOptions = period === "custom" && dateFrom && dateTo ? { period, dateFrom: new Date(dateFrom).toISOString(), dateTo: (/* @__PURE__ */ new Date(dateTo + "T23:59:59")).toISOString(), compare: true } : { period, compare: true };
+  return useQuery3({
+    queryKey: queryKeys.overview(siteId, period, dateFrom, dateTo),
+    queryFn: async () => {
+      client.setSiteId(siteId);
+      return client.getOverview(metrics2, statsOptions);
+    },
+    staleTime,
+    enabled: options?.enabled !== false && (period !== "custom" || !!dateFrom && !!dateTo)
+  });
+}
+
+// src/hooks/useThemeColors.ts
+import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
+
+// src/utils/theme.ts
+function cssVar(name, fallback) {
+  if (typeof document === "undefined") return fallback ? `rgb(${fallback})` : "";
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  if (!raw) return fallback ? `rgb(${fallback})` : "";
+  if (/^\d+\s+\d+\s+\d+$/.test(raw)) return `rgb(${raw.replace(/ /g, ", ")})`;
+  return raw;
+}
+var DEFAULT_PIE = [
+  "99 102 241",
+  "139 92 246",
+  "59 130 246",
+  "20 184 166",
+  "16 185 129",
+  "245 158 11",
+  "239 68 68",
+  "236 72 153"
+];
+function getPieColors() {
+  return Array.from(
+    { length: 8 },
+    (_, i) => cssVar(`--lm-pie-${i + 1}`, DEFAULT_PIE[i])
+  );
+}
+
+// src/hooks/useThemeColors.ts
+function useThemeColors() {
+  const [, setTick] = useState2(0);
+  useEffect2(() => {
+    if (typeof document === "undefined") return;
+    const target = document.documentElement;
+    const observer = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.type === "attributes" && (m.attributeName === "class" || m.attributeName === "style")) {
+          setTick((t) => t + 1);
+          break;
+        }
+      }
+    });
+    observer.observe(target, { attributes: true, attributeFilter: ["class", "style"] });
+    return () => observer.disconnect();
+  }, []);
+  const get = useCallback((varName, fallback) => cssVar(varName, fallback), []);
+  return { get };
+}
+
+// src/components/StatCard.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function StatCard({ title, value, loading, changePercent, className }) {
+  const hasComparison = changePercent !== void 0 && changePercent !== null;
+  const isPositive = hasComparison && changePercent > 0;
+  const isNegative = hasComparison && changePercent < 0;
+  return /* @__PURE__ */ jsxs("div", { className: `rounded-xl bg-[rgb(var(--lm-bg))] border border-[rgb(var(--lm-border))] p-6 hover:border-[rgb(var(--lm-border-hover))] hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-[rgb(var(--lm-text-tertiary))] uppercase tracking-wide mb-1", children: title }),
+    loading ? /* @__PURE__ */ jsx2("div", { className: "h-8 w-20 bg-[rgb(var(--lm-bg-tertiary))] rounded animate-pulse" }) : /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+      /* @__PURE__ */ jsx2("p", { className: "text-3xl font-semibold tabular-nums text-[rgb(var(--lm-text))]", children: typeof value === "number" ? value.toLocaleString() : value }),
+      hasComparison && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: `text-xs font-medium pb-0.5 ${isPositive ? "text-[rgb(var(--lm-positive))]" : isNegative ? "text-[rgb(var(--lm-negative))]" : "text-[rgb(var(--lm-text-tertiary))]"}`,
+          children: [
+            isPositive && /* @__PURE__ */ jsx2("svg", { className: "w-3 h-3 inline mr-0.5 -mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) }),
+            isNegative && /* @__PURE__ */ jsx2("svg", { className: "w-3 h-3 inline mr-0.5 -mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }),
+            changePercent === 0 ? "0%" : `${changePercent > 0 ? "+" : ""}${changePercent.toFixed(1)}%`
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/TopList.tsx
+import { useState as useState3 } from "react";
+
+// src/utils/icons.tsx
+import { SiGooglechrome, SiFirefox, SiSafari, SiOpera, SiApple, SiLinux, SiAndroid } from "react-icons/si";
+import { SiGoogle, SiInstagram, SiX, SiFacebook, SiLinkedin, SiYoutube, SiGithub, SiReddit, SiPinterest, SiTiktok } from "react-icons/si";
+import { FaEdge, FaInternetExplorer, FaGlobe, FaWindows } from "react-icons/fa6";
+import { HiOutlineDesktopComputer, HiOutlineDeviceMobile, HiOutlineDeviceTablet } from "react-icons/hi";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var iconClass = "w-4 h-4 flex-shrink-0";
+function getBrowserIcon(browser) {
+  const b = browser.toLowerCase();
+  if (b.includes("chrome") && !b.includes("edge")) return /* @__PURE__ */ jsx3(SiGooglechrome, { className: `${iconClass} text-[#4285F4]` });
+  if (b.includes("firefox")) return /* @__PURE__ */ jsx3(SiFirefox, { className: `${iconClass} text-[#FF7139]` });
+  if (b.includes("safari") && !b.includes("chrome")) return /* @__PURE__ */ jsx3(SiSafari, { className: `${iconClass} text-[#006CFF]` });
+  if (b.includes("edge")) return /* @__PURE__ */ jsx3(FaEdge, { className: `${iconClass} text-[#0078D7]` });
+  if (b.includes("opera")) return /* @__PURE__ */ jsx3(SiOpera, { className: `${iconClass} text-[#FF1B2D]` });
+  if (b.includes("ie") || b.includes("internet explorer")) return /* @__PURE__ */ jsx3(FaInternetExplorer, { className: `${iconClass} text-blue-400` });
+  return /* @__PURE__ */ jsx3(FaGlobe, { className: `${iconClass} text-zinc-400` });
+}
+function getOSIcon(os) {
+  const o = os.toLowerCase();
+  if (o.includes("windows")) return /* @__PURE__ */ jsx3(FaWindows, { className: `${iconClass} text-[#0078D4]` });
+  if (o.includes("mac") || o.includes("ios")) return /* @__PURE__ */ jsx3(SiApple, { className: `${iconClass} text-zinc-700` });
+  if (o.includes("linux")) return /* @__PURE__ */ jsx3(SiLinux, { className: `${iconClass} text-[#FCC624]` });
+  if (o.includes("android")) return /* @__PURE__ */ jsx3(SiAndroid, { className: `${iconClass} text-[#34A853]` });
+  return /* @__PURE__ */ jsx3(HiOutlineDesktopComputer, { className: `${iconClass} text-zinc-400` });
+}
+function getDeviceIcon(type) {
+  const t = type.toLowerCase();
+  if (t.includes("mobile")) return /* @__PURE__ */ jsx3(HiOutlineDeviceMobile, { className: `${iconClass} text-zinc-500` });
+  if (t.includes("tablet")) return /* @__PURE__ */ jsx3(HiOutlineDeviceTablet, { className: `${iconClass} text-zinc-500` });
+  return /* @__PURE__ */ jsx3(HiOutlineDesktopComputer, { className: `${iconClass} text-zinc-500` });
+}
+function getReferrerIcon(referrer) {
+  const r = referrer.toLowerCase();
+  if (r.includes("google")) return /* @__PURE__ */ jsx3(SiGoogle, { className: `${iconClass} text-[#4285F4]` });
+  if (r.includes("instagram")) return /* @__PURE__ */ jsx3(SiInstagram, { className: `${iconClass} text-[#E4405F]` });
+  if (r.includes("twitter") || r.includes("t.co") || r.includes("x.com")) return /* @__PURE__ */ jsx3(SiX, { className: `${iconClass} text-zinc-800` });
+  if (r.includes("facebook") || r.includes("fb.com")) return /* @__PURE__ */ jsx3(SiFacebook, { className: `${iconClass} text-[#1877F2]` });
+  if (r.includes("linkedin")) return /* @__PURE__ */ jsx3(SiLinkedin, { className: `${iconClass} text-[#0A66C2]` });
+  if (r.includes("youtube")) return /* @__PURE__ */ jsx3(SiYoutube, { className: `${iconClass} text-[#FF0000]` });
+  if (r.includes("github")) return /* @__PURE__ */ jsx3(SiGithub, { className: `${iconClass} text-zinc-800` });
+  if (r.includes("reddit")) return /* @__PURE__ */ jsx3(SiReddit, { className: `${iconClass} text-[#FF4500]` });
+  if (r.includes("pinterest")) return /* @__PURE__ */ jsx3(SiPinterest, { className: `${iconClass} text-[#BD081C]` });
+  if (r.includes("tiktok")) return /* @__PURE__ */ jsx3(SiTiktok, { className: `${iconClass} text-zinc-800` });
+  return /* @__PURE__ */ jsx3(FaGlobe, { className: `${iconClass} text-zinc-400` });
+}
+function countryToFlag(code) {
+  if (!code || code.length !== 2) return "";
+  const upper = code.toUpperCase();
+  return String.fromCodePoint(
+    ...Array.from(upper).map((c) => 127462 + c.charCodeAt(0) - 65)
+  );
+}
+
+// src/components/TopList.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function getIcon(type, key) {
+  if (!type) return null;
+  switch (type) {
+    case "pages":
+      return /* @__PURE__ */ jsx4("svg", { className: "w-4 h-4 flex-shrink-0 text-[rgb(var(--lm-text-tertiary))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
+    case "referrers":
+      return getReferrerIcon(key);
+    case "countries": {
+      const flag = countryToFlag(key);
+      return flag ? /* @__PURE__ */ jsx4("span", { className: "text-sm flex-shrink-0 leading-none", children: flag }) : null;
+    }
+    case "events":
+      return /* @__PURE__ */ jsx4("svg", { className: "w-4 h-4 flex-shrink-0 text-amber-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M13 10V3L4 14h7v7l9-11h-7z" }) });
+    case "browsers":
+      return getBrowserIcon(key);
+    case "devices":
+      return getDeviceIcon(key);
+  }
+}
+function TopList({ title, data, loading, type, className }) {
+  const [tooltip, setTooltip] = useState3(null);
+  const maxValue = data ? Math.max(...data.map((d) => d.value), 1) : 1;
+  const totalValue = data ? data.reduce((sum, d) => sum + d.value, 0) : 0;
+  return /* @__PURE__ */ jsxs2("div", { className: `rounded-xl bg-[rgb(var(--lm-bg))] border border-[rgb(var(--lm-border))] p-5 hover:shadow-sm transition-all duration-200 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx4("h3", { className: "text-xs font-medium text-[rgb(var(--lm-text-tertiary))] uppercase tracking-wide mb-4", children: title }),
+    loading ? /* @__PURE__ */ jsx4("div", { className: "space-y-3", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx4("div", { className: "h-7 bg-[rgb(var(--lm-bg-secondary))] rounded animate-pulse" }, i)) }) : !data || data.length === 0 ? /* @__PURE__ */ jsx4("div", { className: "py-8 text-center", children: /* @__PURE__ */ jsx4("p", { className: "text-[rgb(var(--lm-text-muted))] text-sm", children: "No data yet" }) }) : /* @__PURE__ */ jsx4("div", { className: "space-y-1", children: data.map((item) => {
+      const pct = totalValue > 0 ? Math.round(item.value / totalValue * 100) : 0;
+      const icon = getIcon(type, item.key);
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: "relative group",
+          onMouseEnter: (e) => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            setTooltip({ key: item.key, value: item.value, pct, x: rect.left + rect.width / 2, y: rect.top });
+          },
+          onMouseLeave: () => setTooltip(null),
+          children: [
+            /* @__PURE__ */ jsx4(
+              "div",
+              {
+                className: "absolute inset-0 bg-[rgb(var(--lm-bar))] rounded transition-all group-hover:bg-[rgb(var(--lm-bar-hover))]",
+                style: { width: `${item.value / maxValue * 100}%` }
+              }
+            ),
+            /* @__PURE__ */ jsxs2("div", { className: "relative flex items-center justify-between px-2.5 py-1.5 text-sm", children: [
+              /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 truncate mr-3", children: [
+                icon,
+                /* @__PURE__ */ jsx4("span", { className: "truncate text-[rgb(var(--lm-text-secondary))]", children: item.key || "(direct)" })
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+                /* @__PURE__ */ jsx4("span", { className: "text-[rgb(var(--lm-text-secondary))] tabular-nums text-xs font-medium", children: item.value.toLocaleString() }),
+                /* @__PURE__ */ jsxs2("span", { className: "text-[rgb(var(--lm-text-tertiary))] tabular-nums text-xs w-8 text-right", children: [
+                  pct,
+                  "%"
+                ] })
+              ] })
+            ] })
+          ]
+        },
+        item.key
+      );
+    }) }),
+    tooltip && /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "fixed z-50 bg-[rgb(var(--lm-tooltip-bg))] text-[rgb(var(--lm-tooltip-text))] text-xs rounded-lg px-3 py-2 shadow-lg pointer-events-none max-w-xs",
+        style: { left: tooltip.x, top: tooltip.y - 8, transform: "translate(-50%, -100%)" },
+        children: [
+          /* @__PURE__ */ jsx4("p", { className: "font-medium break-all", children: tooltip.key || "(direct)" }),
+          /* @__PURE__ */ jsxs2("p", { className: "text-[rgb(var(--lm-tooltip-muted))] mt-0.5", children: [
+            tooltip.value.toLocaleString(),
+            " \xB7 ",
+            tooltip.pct,
+            "%"
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/PieChartCard.tsx
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function PieChartCard({ title, data, loading, className }) {
+  const total = data.reduce((sum, d) => sum + d.value, 0);
+  const colors = getPieColors();
+  return /* @__PURE__ */ jsxs3("div", { className: `rounded-xl bg-[rgb(var(--lm-bg))] border border-[rgb(var(--lm-border))] p-5 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx5("h3", { className: "text-xs font-medium text-[rgb(var(--lm-text-tertiary))] uppercase tracking-wide mb-4", children: title }),
+    loading ? /* @__PURE__ */ jsx5("div", { className: "h-48 bg-[rgb(var(--lm-bg-secondary))] rounded-lg animate-pulse" }) : data.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "h-48 flex items-center justify-center", children: /* @__PURE__ */ jsx5("p", { className: "text-[rgb(var(--lm-text-muted))] text-sm", children: "No data yet" }) }) : /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx5("div", { className: "w-36 h-36 flex-shrink-0", children: /* @__PURE__ */ jsx5(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs3(PieChart, { children: [
+        /* @__PURE__ */ jsx5(
+          Pie,
+          {
+            data,
+            cx: "50%",
+            cy: "50%",
+            innerRadius: 35,
+            outerRadius: 55,
+            dataKey: "value",
+            strokeWidth: 2,
+            stroke: cssVar("--lm-bg", "255 255 255"),
+            children: data.map((_, index) => /* @__PURE__ */ jsx5(Cell, { fill: colors[index % colors.length] }, index))
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          Tooltip,
+          {
+            content: ({ active, payload }) => {
+              if (!active || !payload?.[0]) return null;
+              const item = payload[0];
+              const pct = total > 0 ? Math.round(item.value / total * 100) : 0;
+              return /* @__PURE__ */ jsxs3("div", { className: "bg-[rgb(var(--lm-tooltip-bg))] text-[rgb(var(--lm-tooltip-text))] text-xs rounded-lg px-3 py-2 shadow-lg", children: [
+                /* @__PURE__ */ jsx5("p", { className: "font-medium", children: item.name }),
+                /* @__PURE__ */ jsxs3("p", { className: "text-[rgb(var(--lm-tooltip-muted))]", children: [
+                  item.value.toLocaleString(),
+                  " (",
+                  pct,
+                  "%)"
+                ] })
+              ] });
+            }
+          }
+        )
+      ] }) }) }),
+      /* @__PURE__ */ jsx5("div", { className: "flex-1 space-y-1.5 min-w-0", children: data.slice(0, 6).map((item, i) => {
+        const pct = total > 0 ? Math.round(item.value / total * 100) : 0;
+        return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx5(
+            "span",
+            {
+              className: "w-2.5 h-2.5 rounded-full flex-shrink-0",
+              style: { backgroundColor: colors[i % colors.length] }
+            }
+          ),
+          /* @__PURE__ */ jsx5("span", { className: "text-[rgb(var(--lm-text-secondary))] truncate", children: item.name || "(unknown)" }),
+          /* @__PURE__ */ jsxs3("span", { className: "text-[rgb(var(--lm-text-tertiary))] ml-auto flex-shrink-0 tabular-nums text-xs", children: [
+            pct,
+            "%"
+          ] })
+        ] }, item.name);
+      }) })
+    ] })
+  ] });
+}
+
+// src/components/PeriodSelector.tsx
+import { useState as useState4 } from "react";
+
+// src/components/DateRangePicker.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function DateRangePicker({ startDate, endDate, onStartChange, onEndChange, className }) {
+  return /* @__PURE__ */ jsxs4("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        type: "date",
+        value: startDate,
+        onChange: (e) => onStartChange(e.target.value),
+        max: endDate || void 0,
+        className: "bg-[rgb(var(--lm-bg))] border border-[rgb(var(--lm-border))] rounded-lg px-2.5 py-1.5 text-sm text-[rgb(var(--lm-text))] focus:outline-none focus:border-[rgb(var(--lm-accent))]"
+      }
+    ),
+    /* @__PURE__ */ jsx6("span", { className: "text-[rgb(var(--lm-text-tertiary))] text-sm", children: "to" }),
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        type: "date",
+        value: endDate,
+        onChange: (e) => onEndChange(e.target.value),
+        min: startDate || void 0,
+        max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+        className: "bg-[rgb(var(--lm-bg))] border border-[rgb(var(--lm-border))] rounded-lg px-2.5 py-1.5 text-sm text-[rgb(var(--lm-text))] focus:outline-none focus:border-[rgb(var(--lm-accent))]"
+      }
+    )
+  ] });
+}
+
+// src/components/PeriodSelector.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var periods = [
+  { value: "1h", label: "1H" },
+  { value: "24h", label: "24H" },
+  { value: "7d", label: "7D" },
+  { value: "30d", label: "30D" },
+  { value: "90d", label: "90D" },
+  { value: "custom", label: "Custom" }
+];
+function PeriodSelector({ value, onChange, dateFrom, dateTo, onDateFromChange, onDateToChange, className }) {
+  const [showCustom, setShowCustom] = useState4(value === "custom");
+  return /* @__PURE__ */ jsxs5("div", { className: `flex items-center gap-3 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx7("div", { className: "flex gap-1 bg-[rgb(var(--lm-bg-tertiary))] rounded-lg p-1 border border-[rgb(var(--lm-border))]", children: periods.map((p) => /* @__PURE__ */ jsx7(
+      "button",
+      {
+        onClick: () => {
+          onChange(p.value);
+          setShowCustom(p.value === "custom");
+        },
+        className: `px-3 py-1.5 text-sm rounded-md transition-colors ${value === p.value ? "bg-[rgb(var(--lm-bg))] text-[rgb(var(--lm-text))] shadow-sm" : "text-[rgb(var(--lm-text-secondary))] hover:text-[rgb(var(--lm-text))]"}`,
+        children: p.label
+      },
+      p.value
+    )) }),
+    showCustom && onDateFromChange && onDateToChange && /* @__PURE__ */ jsx7(
+      DateRangePicker,
+      {
+        startDate: dateFrom || "",
+        endDate: dateTo || "",
+        onStartChange: onDateFromChange,
+        onEndChange: onDateToChange
+      }
+    )
+  ] });
+}
+
+// src/components/ExportButton.tsx
+import { useState as useState5, useRef, useEffect as useEffect3 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function ExportButton({ data, filename, className }) {
+  const [open, setOpen] = useState5(false);
+  const ref = useRef(null);
+  useEffect3(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  if (!data || data.length === 0) return null;
+  function download(format) {
+    let content;
+    let mimeType;
+    let ext;
+    const headers = Object.keys(data[0]);
+    switch (format) {
+      case "csv": {
+        const rows = [
+          headers.join(","),
+          ...data.map(
+            (row) => headers.map((h) => {
+              const val = row[h];
+              const str = val === null || val === void 0 ? "" : String(val);
+              return str.includes(",") || str.includes('"') || str.includes("\n") ? `"${str.replace(/"/g, '""')}"` : str;
+            }).join(",")
+          )
+        ];
+        content = rows.join("\n");
+        mimeType = "text/csv";
+        ext = "csv";
+        break;
+      }
+      case "json": {
+        content = JSON.stringify(data, null, 2);
+        mimeType = "application/json";
+        ext = "json";
+        break;
+      }
+      case "markdown": {
+        const headerRow = "| " + headers.join(" | ") + " |";
+        const separator = "| " + headers.map(() => "---").join(" | ") + " |";
+        const bodyRows = data.map(
+          (row) => "| " + headers.map((h) => String(row[h] ?? "")).join(" | ") + " |"
+        );
+        content = [headerRow, separator, ...bodyRows].join("\n");
+        mimeType = "text/markdown";
+        ext = "md";
+        break;
+      }
+    }
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${filename}.${ext}`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs6("div", { ref, className: `relative ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        onClick: () => setOpen(!open),
+        className: "flex items-center gap-1.5 px-3 py-1.5 text-sm border border-[rgb(var(--lm-border))] rounded-lg hover:border-[rgb(var(--lm-border-hover))] transition-colors text-[rgb(var(--lm-text-secondary))]",
+        children: [
+          /* @__PURE__ */ jsx8("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
+          "Export"
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs6("div", { className: "absolute top-full mt-1 right-0 w-36 bg-[rgb(var(--lm-bg))] border border-[rgb(var(--lm-border))] rounded-lg shadow-lg z-50 py-1", children: [
+      /* @__PURE__ */ jsx8("button", { onClick: () => download("csv"), className: "w-full text-left px-3 py-2 text-sm hover:bg-[rgb(var(--lm-bg-secondary))] text-[rgb(var(--lm-text-secondary))]", children: "CSV" }),
+      /* @__PURE__ */ jsx8("button", { onClick: () => download("json"), className: "w-full text-left px-3 py-2 text-sm hover:bg-[rgb(var(--lm-bg-secondary))] text-[rgb(var(--lm-text-secondary))]", children: "JSON" }),
+      /* @__PURE__ */ jsx8("button", { onClick: () => download("markdown"), className: "w-full text-left px-3 py-2 text-sm hover:bg-[rgb(var(--lm-bg-secondary))] text-[rgb(var(--lm-text-secondary))]", children: "Markdown" })
+    ] })
+  ] });
+}
+
+// src/widgets/StatCards.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function StatCards({ period, className }) {
+  const { data: overview, isLoading: loading } = useOverview({ period });
+  return /* @__PURE__ */ jsxs7("div", { className: `grid grid-cols-2 md:grid-cols-4 gap-5 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx9(
+      StatCard,
+      {
+        title: "Pageviews",
+        value: overview?.pageviews?.total ?? 0,
+        changePercent: overview?.pageviews?.changePercent,
+        loading
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      StatCard,
+      {
+        title: "Visitors",
+        value: overview?.visitors?.total ?? 0,
+        changePercent: overview?.visitors?.changePercent,
+        loading
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      StatCard,
+      {
+        title: "Sessions",
+        value: overview?.sessions?.total ?? 0,
+        changePercent: overview?.sessions?.changePercent,
+        loading
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      StatCard,
+      {
+        title: "Events",
+        value: overview?.events?.total ?? 0,
+        changePercent: overview?.events?.changePercent,
+        loading
+      }
+    )
+  ] });
+}
+
+// src/widgets/TimeSeriesChart.tsx
+import { useState as useState6 } from "react";
+import { AreaChart, Area, XAxis, YAxis, Tooltip as Tooltip2, ResponsiveContainer as ResponsiveContainer2, CartesianGrid } from "recharts";
+
+// src/utils/formatters.ts
+function formatDate(iso, period) {
+  const d = new Date(iso);
+  if (period === "1h" || period === "24h") {
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  }
+  return d.toLocaleDateString([], { month: "short", day: "numeric" });
+}
+function formatTooltipDate(iso, period) {
+  const d = new Date(iso);
+  if (period === "1h" || period === "24h") {
+    return d.toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+  }
+  return d.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" });
+}
+
+// src/widgets/TimeSeriesChart.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var metrics = [
+  { value: "pageviews", label: "Pageviews" },
+  { value: "visitors", label: "Visitors" },
+  { value: "sessions", label: "Sessions" }
+];
+function TimeSeriesChart({ defaultMetric = "pageviews", period: periodProp, className }) {
+  const [metric, setMetric] = useState6(defaultMetric);
+  const { period: ctxPeriod } = useLitemetricsUI();
+  const period = periodProp ?? ctxPeriod;
+  const { get } = useThemeColors();
+  const { data: result, isLoading: loading } = useTimeSeries(metric, { period });
+  const data = result?.data ?? [];
+  const strokeColor = get("--lm-chart-stroke", "99 102 241");
+  const fillColor = get("--lm-chart-fill", "99 102 241");
+  const gridColor = get("--lm-chart-grid", "244 244 245");
+  const axisColor = get("--lm-chart-axis", "161 161 170");
+  return /* @__PURE__ */ jsxs8("div", { className: `rounded-xl bg-[rgb(var(--lm-bg))] border border-[rgb(var(--lm-border))] p-6 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx10("h3", { className: "text-sm font-medium text-[rgb(var(--lm-text-secondary))]", children: "Overview" }),
+      /* @__PURE__ */ jsx10("div", { className: "flex gap-1", children: metrics.map((m) => /* @__PURE__ */ jsx10(
+        "button",
+        {
+          onClick: () => setMetric(m.value),
+          className: `px-2.5 py-1 text-xs rounded-md transition-colors ${metric === m.value ? "bg-[rgb(var(--lm-accent-light))] text-[rgb(var(--lm-accent-text))] font-medium" : "text-[rgb(var(--lm-text-tertiary))] hover:text-[rgb(var(--lm-text-secondary))]"}`,
+          children: m.label
+        },
+        m.value
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: "h-64", children: loading ? /* @__PURE__ */ jsx10("div", { className: "h-full bg-[rgb(var(--lm-bg-secondary))] rounded-lg animate-pulse" }) : data.length === 0 ? /* @__PURE__ */ jsx10("div", { className: "h-full flex items-center justify-center text-[rgb(var(--lm-text-tertiary))] text-sm", children: "No data for this period" }) : /* @__PURE__ */ jsx10(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs8(AreaChart, { data, margin: { top: 4, right: 4, bottom: 0, left: -20 }, children: [
+      /* @__PURE__ */ jsx10("defs", { children: /* @__PURE__ */ jsxs8("linearGradient", { id: "lm-chartGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx10("stop", { offset: "0%", stopColor: fillColor, stopOpacity: 0.2 }),
+        /* @__PURE__ */ jsx10("stop", { offset: "100%", stopColor: fillColor, stopOpacity: 0 })
+      ] }) }),
+      /* @__PURE__ */ jsx10(CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor, vertical: false }),
+      /* @__PURE__ */ jsx10(
+        XAxis,
+        {
+          dataKey: "date",
+          tickFormatter: (v) => formatDate(v, period),
+          tick: { fontSize: 11, fill: axisColor },
+          tickLine: false,
+          axisLine: { stroke: gridColor },
+          interval: "preserveStartEnd",
+          minTickGap: 40
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        YAxis,
+        {
+          tick: { fontSize: 11, fill: axisColor },
+          tickLine: false,
+          axisLine: false,
+          allowDecimals: false
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Tooltip2,
+        {
+          content: ({ active, payload }) => {
+            if (!active || !payload?.[0]) return null;
+            const point = payload[0].payload;
+            return /* @__PURE__ */ jsxs8("div", { className: "bg-[rgb(var(--lm-tooltip-bg))] text-[rgb(var(--lm-tooltip-text))] text-xs rounded-lg px-3 py-2 shadow-lg", children: [
+              /* @__PURE__ */ jsx10("p", { className: "text-[rgb(var(--lm-tooltip-muted))] mb-0.5", children: formatTooltipDate(point.date, period) }),
+              /* @__PURE__ */ jsxs8("p", { className: "font-medium", children: [
+                point.value.toLocaleString(),
+                " ",
+                metric
+              ] })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Area,
+        {
+          type: "monotone",
+          dataKey: "value",
+          stroke: strokeColor,
+          strokeWidth: 2,
+          fill: "url(#lm-chartGradient)"
+        }
+      )
+    ] }) }) })
+  ] });
+}
+
+// src/widgets/TopPages.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function TopPages({ period, limit = 10, className }) {
+  const { data, isLoading } = useStats("top_pages", { period, limit });
+  return /* @__PURE__ */ jsx11(TopList, { title: "Pages", type: "pages", data: data?.data ?? null, loading: isLoading, className });
+}
+
+// src/widgets/TopReferrers.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function TopReferrers({ period, limit = 10, className }) {
+  const { data, isLoading } = useStats("top_referrers", { period, limit });
+  return /* @__PURE__ */ jsx12(TopList, { title: "Referrers", type: "referrers", data: data?.data ?? null, loading: isLoading, className });
+}
+
+// src/widgets/TopCountries.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function TopCountries({ period, limit = 10, className }) {
+  const { data, isLoading } = useStats("top_countries", { period, limit });
+  return /* @__PURE__ */ jsx13(TopList, { title: "Countries", type: "countries", data: data?.data ?? null, loading: isLoading, className });
+}
+
+// src/widgets/TopEvents.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function TopEvents({ period, limit = 10, className }) {
+  const { data, isLoading } = useStats("top_events", { period, limit });
+  return /* @__PURE__ */ jsx14(TopList, { title: "Events", type: "events", data: data?.data ?? null, loading: isLoading, className });
+}
+
+// src/widgets/TopBrowsers.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function TopBrowsers({ period, limit = 10, className }) {
+  const { data, isLoading } = useStats("top_browsers", { period, limit });
+  return /* @__PURE__ */ jsx15(TopList, { title: "Browsers", type: "browsers", data: data?.data ?? null, loading: isLoading, className });
+}
+
+// src/widgets/TopDevices.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function TopDevices({ period, limit = 10, className }) {
+  const { data, isLoading } = useStats("top_devices", { period, limit });
+  return /* @__PURE__ */ jsx16(TopList, { title: "Devices", type: "devices", data: data?.data ?? null, loading: isLoading, className });
+}
+
+// src/widgets/BrowsersChart.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function BrowsersChart({ period, className }) {
+  const { data, isLoading } = useStats("top_browsers", { period });
+  const pieData = (data?.data ?? []).map((d) => ({ name: d.key, value: d.value }));
+  return /* @__PURE__ */ jsx17(PieChartCard, { title: "Browsers", data: pieData, loading: isLoading, className });
+}
+
+// src/widgets/DevicesChart.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function DevicesChart({ period, className }) {
+  const { data, isLoading } = useStats("top_devices", { period });
+  const pieData = (data?.data ?? []).map((d) => ({ name: d.key, value: d.value }));
+  return /* @__PURE__ */ jsx18(PieChartCard, { title: "Devices", data: pieData, loading: isLoading, className });
+}
+
+// src/widgets/WorldMap.tsx
+import { useState as useState7, memo, lazy, Suspense } from "react";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+var geoUrl = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json";
+var WorldMapInner = lazy(() => import("./WorldMapInner-AJ3WDZR2.js"));
+var WorldMap = memo(function WorldMap2({ period, className }) {
+  const [tooltip, setTooltip] = useState7(null);
+  const { get } = useThemeColors();
+  const { data: statsResult, isLoading: loading } = useStats("top_countries", { period, limit: 200 });
+  const countryData = {};
+  if (statsResult?.data) {
+    for (const d of statsResult.data) {
+      countryData[d.key] = d.value;
+    }
+  }
+  const maxValue = Math.max(...Object.values(countryData), 1);
+  function parseRGB(triplet) {
+    const parts = triplet.trim().split(/\s+/).map(Number);
+    return [parts[0] || 0, parts[1] || 0, parts[2] || 0];
+  }
+  function getColor(iso) {
+    const value = countryData[iso] || 0;
+    const emptyColor = get("--lm-map-empty", "244 244 245");
+    if (value === 0) return emptyColor;
+    const intensity = Math.min(value / maxValue, 1);
+    const emptyRaw = getComputedStyle(document.documentElement).getPropertyValue("--lm-map-empty").trim() || "244 244 245";
+    const accentRaw = getComputedStyle(document.documentElement).getPropertyValue("--lm-accent").trim() || "99 102 241";
+    const [er, eg, eb] = parseRGB(emptyRaw);
+    const [ar, ag, ab] = parseRGB(accentRaw);
+    const r = Math.round(er + intensity * (ar - er));
+    const g = Math.round(eg + intensity * (ag - eg));
+    const b = Math.round(eb + intensity * (ab - eb));
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+  const strokeColor = get("--lm-map-stroke", "228 228 231");
+  const hoverColor = get("--lm-map-hover", "129 140 248");
+  return /* @__PURE__ */ jsxs9("div", { className: `rounded-xl bg-[rgb(var(--lm-bg))] border border-[rgb(var(--lm-border))] p-5 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx19("h3", { className: "text-xs font-medium text-[rgb(var(--lm-text-tertiary))] uppercase tracking-wide mb-3", children: "Visitors by Country" }),
+    loading ? /* @__PURE__ */ jsx19("div", { className: "h-64 bg-[rgb(var(--lm-bg-secondary))] rounded-lg animate-pulse" }) : /* @__PURE__ */ jsx19(Suspense, { fallback: /* @__PURE__ */ jsx19("div", { className: "h-64 bg-[rgb(var(--lm-bg-secondary))] rounded-lg flex items-center justify-center text-[rgb(var(--lm-text-tertiary))] text-sm", children: "Loading map..." }), children: /* @__PURE__ */ jsx19(
+      WorldMapInner,
+      {
+        geoUrl,
+        countryData,
+        getColor,
+        setTooltip,
+        strokeColor,
+        hoverColor
+      }
+    ) }),
+    tooltip && /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: "fixed z-50 bg-[rgb(var(--lm-tooltip-bg))] text-[rgb(var(--lm-tooltip-text))] text-xs rounded-lg px-3 py-2 shadow-lg pointer-events-none",
+        style: { left: tooltip.x + 10, top: tooltip.y - 30 },
+        children: [
+          /* @__PURE__ */ jsx19("p", { className: "font-medium", children: tooltip.name }),
+          /* @__PURE__ */ jsxs9("p", { className: "text-[rgb(var(--lm-tooltip-muted))]", children: [
+            tooltip.value.toLocaleString(),
+            " visitor",
+            tooltip.value !== 1 ? "s" : ""
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+
+// src/widgets/AnalyticsDashboard.tsx
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+function AnalyticsDashboard({
+  showPeriodSelector = true,
+  showExport = true,
+  showWorldMap = true,
+  showPieCharts = true,
+  period,
+  className
+}) {
+  const { period: ctxPeriod, setPeriod, dateFrom, setDateFrom, dateTo, setDateTo } = useLitemetricsUI();
+  const effectivePeriod = period ?? ctxPeriod;
+  return /* @__PURE__ */ jsxs10("div", { className, children: [
+    (showPeriodSelector || showExport) && /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between mb-6 flex-wrap gap-3", children: [
+      showPeriodSelector && /* @__PURE__ */ jsx20(
+        PeriodSelector,
+        {
+          value: effectivePeriod,
+          onChange: setPeriod,
+          dateFrom,
+          dateTo,
+          onDateFromChange: setDateFrom,
+          onDateToChange: setDateTo
+        }
+      ),
+      showExport && /* @__PURE__ */ jsx20(ExportButton, { data: [], filename: `analytics-${effectivePeriod}` })
+    ] }),
+    /* @__PURE__ */ jsx20(TimeSeriesChart, { period: effectivePeriod, className: "mb-6" }),
+    /* @__PURE__ */ jsx20(StatCards, { period: effectivePeriod, className: "mb-6" }),
+    showWorldMap && /* @__PURE__ */ jsx20(WorldMap, { period: effectivePeriod, className: "mb-6" }),
+    showPieCharts && /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5 mb-6", children: [
+      /* @__PURE__ */ jsx20(BrowsersChart, { period: effectivePeriod }),
+      /* @__PURE__ */ jsx20(DevicesChart, { period: effectivePeriod })
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5", children: [
+      /* @__PURE__ */ jsx20(TopPages, { period: effectivePeriod }),
+      /* @__PURE__ */ jsx20(TopReferrers, { period: effectivePeriod }),
+      /* @__PURE__ */ jsx20(TopCountries, { period: effectivePeriod }),
+      /* @__PURE__ */ jsx20(TopEvents, { period: effectivePeriod }),
+      /* @__PURE__ */ jsx20(TopBrowsers, { period: effectivePeriod }),
+      /* @__PURE__ */ jsx20(TopDevices, { period: effectivePeriod })
+    ] })
+  ] });
+}
+export {
+  AnalyticsDashboard,
+  BrowsersChart,
+  DateRangePicker,
+  DevicesChart,
+  ExportButton,
+  LitemetricsProvider,
+  PeriodSelector,
+  PieChartCard,
+  StatCard,
+  StatCards,
+  TimeSeriesChart,
+  TopBrowsers,
+  TopCountries,
+  TopDevices,
+  TopEvents,
+  TopList,
+  TopPages,
+  TopReferrers,
+  WorldMap,
+  countryToFlag,
+  cssVar,
+  darkTheme,
+  defaultTheme,
+  formatDate,
+  formatTooltipDate,
+  getBrowserIcon,
+  getDeviceIcon,
+  getOSIcon,
+  getPieColors,
+  getReferrerIcon,
+  queryKeys,
+  useLitemetricsUI,
+  useOverview,
+  useStats,
+  useThemeColors,
+  useTimeSeries
+};
+//# sourceMappingURL=index.js.map