@litemetrics/ui 0.1.1

package/dist/index.cjs

@@ -0,0 +1,1360 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/worldmap-data.ts
+var numericToISO2;
+var init_worldmap_data = __esm({
+  "src/utils/worldmap-data.ts"() {
+    "use strict";
+    numericToISO2 = {
+      "004": "AF",
+      "008": "AL",
+      "012": "DZ",
+      "016": "AS",
+      "020": "AD",
+      "024": "AO",
+      "028": "AG",
+      "031": "AZ",
+      "032": "AR",
+      "036": "AU",
+      "040": "AT",
+      "044": "BS",
+      "048": "BH",
+      "050": "BD",
+      "051": "AM",
+      "056": "BE",
+      "060": "BM",
+      "064": "BT",
+      "068": "BO",
+      "070": "BA",
+      "072": "BW",
+      "076": "BR",
+      "084": "BZ",
+      "090": "SB",
+      "096": "BN",
+      "100": "BG",
+      "104": "MM",
+      "108": "BI",
+      "112": "BY",
+      "116": "KH",
+      "120": "CM",
+      "124": "CA",
+      "140": "CF",
+      "144": "LK",
+      "148": "TD",
+      "152": "CL",
+      "156": "CN",
+      "158": "TW",
+      "170": "CO",
+      "174": "KM",
+      "178": "CG",
+      "180": "CD",
+      "188": "CR",
+      "191": "HR",
+      "192": "CU",
+      "196": "CY",
+      "203": "CZ",
+      "204": "BJ",
+      "208": "DK",
+      "214": "DO",
+      "218": "EC",
+      "222": "SV",
+      "226": "GQ",
+      "231": "ET",
+      "232": "ER",
+      "233": "EE",
+      "242": "FJ",
+      "246": "FI",
+      "250": "FR",
+      "262": "DJ",
+      "266": "GA",
+      "268": "GE",
+      "270": "GM",
+      "275": "PS",
+      "276": "DE",
+      "288": "GH",
+      "300": "GR",
+      "308": "GD",
+      "320": "GT",
+      "324": "GN",
+      "328": "GY",
+      "332": "HT",
+      "340": "HN",
+      "348": "HU",
+      "352": "IS",
+      "356": "IN",
+      "360": "ID",
+      "364": "IR",
+      "368": "IQ",
+      "372": "IE",
+      "376": "IL",
+      "380": "IT",
+      "384": "CI",
+      "388": "JM",
+      "392": "JP",
+      "398": "KZ",
+      "400": "JO",
+      "404": "KE",
+      "408": "KP",
+      "410": "KR",
+      "414": "KW",
+      "417": "KG",
+      "418": "LA",
+      "422": "LB",
+      "426": "LS",
+      "428": "LV",
+      "430": "LR",
+      "434": "LY",
+      "440": "LT",
+      "442": "LU",
+      "450": "MG",
+      "454": "MW",
+      "458": "MY",
+      "462": "MV",
+      "466": "ML",
+      "470": "MT",
+      "478": "MR",
+      "480": "MU",
+      "484": "MX",
+      "496": "MN",
+      "498": "MD",
+      "499": "ME",
+      "504": "MA",
+      "508": "MZ",
+      "512": "OM",
+      "516": "NA",
+      "524": "NP",
+      "528": "NL",
+      "540": "NC",
+      "548": "VU",
+      "554": "NZ",
+      "558": "NI",
+      "562": "NE",
+      "566": "NG",
+      "578": "NO",
+      "586": "PK",
+      "591": "PA",
+      "598": "PG",
+      "600": "PY",
+      "604": "PE",
+      "608": "PH",
+      "616": "PL",
+      "620": "PT",
+      "624": "GW",
+      "626": "TL",
+      "630": "PR",
+      "634": "QA",
+      "642": "RO",
+      "643": "RU",
+      "646": "RW",
+      "662": "LC",
+      "670": "VC",
+      "678": "ST",
+      "682": "SA",
+      "686": "SN",
+      "688": "RS",
+      "694": "SL",
+      "702": "SG",
+      "703": "SK",
+      "704": "VN",
+      "705": "SI",
+      "706": "SO",
+      "710": "ZA",
+      "716": "ZW",
+      "724": "ES",
+      "728": "SS",
+      "729": "SD",
+      "732": "EH",
+      "740": "SR",
+      "748": "SZ",
+      "752": "SE",
+      "756": "CH",
+      "760": "SY",
+      "762": "TJ",
+      "764": "TH",
+      "768": "TG",
+      "780": "TT",
+      "784": "AE",
+      "788": "TN",
+      "792": "TR",
+      "795": "TM",
+      "800": "UG",
+      "804": "UA",
+      "807": "MK",
+      "818": "EG",
+      "826": "GB",
+      "834": "TZ",
+      "840": "US",
+      "854": "BF",
+      "858": "UY",
+      "860": "UZ",
+      "862": "VE",
+      "887": "YE",
+      "894": "ZM"
+    };
+  }
+});
+
+// src/widgets/WorldMapInner.tsx
+var WorldMapInner_exports = {};
+__export(WorldMapInner_exports, {
+  default: () => WorldMapInner
+});
+function WorldMapInner({ geoUrl: geoUrl2, countryData, getColor, setTooltip, strokeColor = "rgb(228, 228, 231)", hoverColor = "rgb(129, 140, 248)" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_react_simple_maps.ComposableMap,
+    {
+      projectionConfig: { scale: 147, center: [0, 20] },
+      style: { width: "100%", height: "auto" },
+      height: 380,
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_simple_maps.ZoomableGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_simple_maps.Geographies, { geography: geoUrl2, children: ({ geographies }) => geographies.map((geo) => {
+        const rawIso = geo.properties.ISO_A2;
+        const iso = rawIso && rawIso !== "-99" ? rawIso : numericToISO2[geo.id] || geo.id;
+        const value = countryData[iso] || 0;
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          import_react_simple_maps.Geography,
+          {
+            geography: geo,
+            fill: getColor(iso),
+            stroke: strokeColor,
+            strokeWidth: 0.5,
+            style: {
+              default: { outline: "none" },
+              hover: { outline: "none", fill: hoverColor, cursor: "pointer" },
+              pressed: { outline: "none" }
+            },
+            onMouseEnter: (e) => {
+              const name = geo.properties.name || iso;
+              setTooltip({ name, value, x: e.clientX, y: e.clientY });
+            },
+            onMouseLeave: () => setTooltip(null)
+          },
+          geo.rsmKey
+        );
+      }) }) })
+    }
+  ) });
+}
+var import_react_simple_maps, import_jsx_runtime19;
+var init_WorldMapInner = __esm({
+  "src/widgets/WorldMapInner.tsx"() {
+    "use strict";
+    import_react_simple_maps = require("react-simple-maps");
+    init_worldmap_data();
+    import_jsx_runtime19 = require("react/jsx-runtime");
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AnalyticsDashboard: () => AnalyticsDashboard,
+  BrowsersChart: () => BrowsersChart,
+  DateRangePicker: () => DateRangePicker,
+  DevicesChart: () => DevicesChart,
+  ExportButton: () => ExportButton,
+  LitemetricsProvider: () => LitemetricsProvider,
+  PeriodSelector: () => PeriodSelector,
+  PieChartCard: () => PieChartCard,
+  StatCard: () => StatCard,
+  StatCards: () => StatCards,
+  TimeSeriesChart: () => TimeSeriesChart,
+  TopBrowsers: () => TopBrowsers,
+  TopCountries: () => TopCountries,
+  TopDevices: () => TopDevices,
+  TopEvents: () => TopEvents,
+  TopList: () => TopList,
+  TopPages: () => TopPages,
+  TopReferrers: () => TopReferrers,
+  WorldMap: () => WorldMap,
+  countryToFlag: () => countryToFlag,
+  cssVar: () => cssVar,
+  darkTheme: () => darkTheme,
+  defaultTheme: () => defaultTheme,
+  formatDate: () => formatDate,
+  formatTooltipDate: () => formatTooltipDate,
+  getBrowserIcon: () => getBrowserIcon,
+  getDeviceIcon: () => getDeviceIcon,
+  getOSIcon: () => getOSIcon,
+  getPieColors: () => getPieColors,
+  getReferrerIcon: () => getReferrerIcon,
+  queryKeys: () => queryKeys,
+  useLitemetricsUI: () => useLitemetricsUI,
+  useOverview: () => useOverview,
+  useStats: () => useStats,
+  useThemeColors: () => useThemeColors,
+  useTimeSeries: () => useTimeSeries
+});
+module.exports = __toCommonJS(index_exports);
+
+// 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
+var import_react = require("react");
+var LitemetricsUIContext = (0, import_react.createContext)(null);
+
+// src/context/LitemetricsProvider.tsx
+var import_react2 = require("react");
+var import_react_query = require("@tanstack/react-query");
+var import_client = require("@litemetrics/client");
+var import_jsx_runtime = require("react/jsx-runtime");
+function LitemetricsProvider({
+  baseUrl,
+  siteId,
+  secretKey,
+  defaultPeriod = "7d",
+  queryClient: externalQueryClient,
+  staleTime = 3e4,
+  theme,
+  darkTheme: darkThemeProp,
+  children
+}) {
+  const [period, setPeriod] = (0, import_react2.useState)(defaultPeriod);
+  const [dateFrom, setDateFrom] = (0, import_react2.useState)("");
+  const [dateTo, setDateTo] = (0, import_react2.useState)("");
+  const client = (0, import_react2.useMemo)(
+    () => (0, import_client.createClient)({ baseUrl, siteId, secretKey }),
+    [baseUrl, siteId, secretKey]
+  );
+  const internalQueryClient = (0, import_react2.useMemo)(
+    () => new import_react_query.QueryClient({ defaultOptions: { queries: { staleTime } } }),
+    [staleTime]
+  );
+  const queryClient = externalQueryClient ?? internalQueryClient;
+  (0, import_react2.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 = (0, import_react2.useMemo)(
+    () => ({ client, siteId, period, setPeriod, dateFrom, setDateFrom, dateTo, setDateTo, staleTime }),
+    [client, siteId, period, dateFrom, dateTo, staleTime]
+  );
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LitemetricsUIContext.Provider, { value, children });
+  if (externalQueryClient) {
+    return content;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_query.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
+var import_react3 = require("react");
+function useLitemetricsUI() {
+  const ctx = (0, import_react3.useContext)(LitemetricsUIContext);
+  if (!ctx) {
+    throw new Error("useLitemetricsUI must be used within a <LitemetricsProvider>");
+  }
+  return ctx;
+}
+
+// src/hooks/useStats.ts
+var import_react_query2 = require("@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 (0, import_react_query2.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
+var import_react_query3 = require("@tanstack/react-query");
+function useTimeSeries(metric, options) {
+  const { client, siteId, period: ctxPeriod, staleTime } = useLitemetricsUI();
+  const period = options?.period ?? ctxPeriod;
+  return (0, import_react_query3.useQuery)({
+    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
+var import_react_query4 = require("@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 (0, import_react_query4.useQuery)({
+    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
+var import_react4 = require("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] = (0, import_react4.useState)(0);
+  (0, import_react4.useEffect)(() => {
+    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 = (0, import_react4.useCallback)((varName, fallback) => cssVar(varName, fallback), []);
+  return { get };
+}
+
+// src/components/StatCard.tsx
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--lm-text-tertiary))] uppercase tracking-wide mb-1", children: title }),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-8 w-20 bg-[rgb(var(--lm-bg-tertiary))] rounded animate-pulse" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-3xl font-semibold tabular-nums text-[rgb(var(--lm-text))]", children: typeof value === "number" ? value.toLocaleString() : value }),
+      hasComparison && /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-3 h-3 inline mr-0.5 -mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) }),
+            isNegative && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-3 h-3 inline mr-0.5 -mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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
+var import_react5 = require("react");
+
+// src/utils/icons.tsx
+var import_si = require("react-icons/si");
+var import_si2 = require("react-icons/si");
+var import_fa6 = require("react-icons/fa6");
+var import_hi = require("react-icons/hi");
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsx)(import_si.SiGooglechrome, { className: `${iconClass} text-[#4285F4]` });
+  if (b.includes("firefox")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si.SiFirefox, { className: `${iconClass} text-[#FF7139]` });
+  if (b.includes("safari") && !b.includes("chrome")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si.SiSafari, { className: `${iconClass} text-[#006CFF]` });
+  if (b.includes("edge")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa6.FaEdge, { className: `${iconClass} text-[#0078D7]` });
+  if (b.includes("opera")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si.SiOpera, { className: `${iconClass} text-[#FF1B2D]` });
+  if (b.includes("ie") || b.includes("internet explorer")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa6.FaInternetExplorer, { className: `${iconClass} text-blue-400` });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa6.FaGlobe, { className: `${iconClass} text-zinc-400` });
+}
+function getOSIcon(os) {
+  const o = os.toLowerCase();
+  if (o.includes("windows")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa6.FaWindows, { className: `${iconClass} text-[#0078D4]` });
+  if (o.includes("mac") || o.includes("ios")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si.SiApple, { className: `${iconClass} text-zinc-700` });
+  if (o.includes("linux")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si.SiLinux, { className: `${iconClass} text-[#FCC624]` });
+  if (o.includes("android")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si.SiAndroid, { className: `${iconClass} text-[#34A853]` });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hi.HiOutlineDesktopComputer, { className: `${iconClass} text-zinc-400` });
+}
+function getDeviceIcon(type) {
+  const t = type.toLowerCase();
+  if (t.includes("mobile")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hi.HiOutlineDeviceMobile, { className: `${iconClass} text-zinc-500` });
+  if (t.includes("tablet")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hi.HiOutlineDeviceTablet, { className: `${iconClass} text-zinc-500` });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hi.HiOutlineDesktopComputer, { className: `${iconClass} text-zinc-500` });
+}
+function getReferrerIcon(referrer) {
+  const r = referrer.toLowerCase();
+  if (r.includes("google")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si2.SiGoogle, { className: `${iconClass} text-[#4285F4]` });
+  if (r.includes("instagram")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si2.SiInstagram, { className: `${iconClass} text-[#E4405F]` });
+  if (r.includes("twitter") || r.includes("t.co") || r.includes("x.com")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si2.SiX, { className: `${iconClass} text-zinc-800` });
+  if (r.includes("facebook") || r.includes("fb.com")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si2.SiFacebook, { className: `${iconClass} text-[#1877F2]` });
+  if (r.includes("linkedin")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si2.SiLinkedin, { className: `${iconClass} text-[#0A66C2]` });
+  if (r.includes("youtube")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si2.SiYoutube, { className: `${iconClass} text-[#FF0000]` });
+  if (r.includes("github")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si2.SiGithub, { className: `${iconClass} text-zinc-800` });
+  if (r.includes("reddit")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si2.SiReddit, { className: `${iconClass} text-[#FF4500]` });
+  if (r.includes("pinterest")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si2.SiPinterest, { className: `${iconClass} text-[#BD081C]` });
+  if (r.includes("tiktok")) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_si2.SiTiktok, { className: `${iconClass} text-zinc-800` });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa6.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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function getIcon(type, key) {
+  if (!type) return null;
+  switch (type) {
+    case "pages":
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm flex-shrink-0 leading-none", children: flag }) : null;
+    }
+    case "events":
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4 h-4 flex-shrink-0 text-amber-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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] = (0, import_react5.useState)(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__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "text-xs font-medium text-[rgb(var(--lm-text-tertiary))] uppercase tracking-wide mb-4", children: title }),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "space-y-3", children: [...Array(5)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-7 bg-[rgb(var(--lm-bg-secondary))] rounded animate-pulse" }, i)) }) : !data || data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-[rgb(var(--lm-text-muted))] text-sm", children: "No data yet" }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsxs)(
+        "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__ */ (0, import_jsx_runtime4.jsx)(
+              "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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative flex items-center justify-between px-2.5 py-1.5 text-sm", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 truncate mr-3", children: [
+                icon,
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-[rgb(var(--lm-text-secondary))]", children: item.key || "(direct)" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[rgb(var(--lm-text-secondary))] tabular-nums text-xs font-medium", children: item.value.toLocaleString() }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-[rgb(var(--lm-text-tertiary))] tabular-nums text-xs w-8 text-right", children: [
+                  pct,
+                  "%"
+                ] })
+              ] })
+            ] })
+          ]
+        },
+        item.key
+      );
+    }) }),
+    tooltip && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "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__ */ (0, import_jsx_runtime4.jsx)("p", { className: "font-medium break-all", children: tooltip.key || "(direct)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-[rgb(var(--lm-tooltip-muted))] mt-0.5", children: [
+            tooltip.value.toLocaleString(),
+            " \xB7 ",
+            tooltip.pct,
+            "%"
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/PieChartCard.tsx
+var import_recharts = require("recharts");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function PieChartCard({ title, data, loading, className }) {
+  const total = data.reduce((sum, d) => sum + d.value, 0);
+  const colors = getPieColors();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `rounded-xl bg-[rgb(var(--lm-bg))] border border-[rgb(var(--lm-border))] p-5 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "text-xs font-medium text-[rgb(var(--lm-text-tertiary))] uppercase tracking-wide mb-4", children: title }),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-48 bg-[rgb(var(--lm-bg-secondary))] rounded-lg animate-pulse" }) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-48 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[rgb(var(--lm-text-muted))] text-sm", children: "No data yet" }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-36 h-36 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_recharts.PieChart, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_recharts.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__ */ (0, import_jsx_runtime5.jsx)(import_recharts.Cell, { fill: colors[index % colors.length] }, index))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_recharts.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__ */ (0, import_jsx_runtime5.jsxs)("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__ */ (0, import_jsx_runtime5.jsx)("p", { className: "font-medium", children: item.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-[rgb(var(--lm-tooltip-muted))]", children: [
+                  item.value.toLocaleString(),
+                  " (",
+                  pct,
+                  "%)"
+                ] })
+              ] });
+            }
+          }
+        )
+      ] }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "span",
+            {
+              className: "w-2.5 h-2.5 rounded-full flex-shrink-0",
+              style: { backgroundColor: colors[i % colors.length] }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[rgb(var(--lm-text-secondary))] truncate", children: item.name || "(unknown)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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
+var import_react6 = require("react");
+
+// src/components/DateRangePicker.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function DateRangePicker({ startDate, endDate, onStartChange, onEndChange, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[rgb(var(--lm-text-tertiary))] text-sm", children: "to" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "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
+var import_jsx_runtime7 = require("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] = (0, import_react6.useState)(value === "custom");
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `flex items-center gap-3 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(
+      "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__ */ (0, import_jsx_runtime7.jsx)(
+      DateRangePicker,
+      {
+        startDate: dateFrom || "",
+        endDate: dateTo || "",
+        onStartChange: onDateFromChange,
+        onEndChange: onDateToChange
+      }
+    )
+  ] });
+}
+
+// src/components/ExportButton.tsx
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ExportButton({ data, filename, className }) {
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const ref = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className: `relative ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "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__ */ (0, import_jsx_runtime8.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)("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__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("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
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function StatCards({ period, className }) {
+  const { data: overview, isLoading: loading } = useOverview({ period });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `grid grid-cols-2 md:grid-cols-4 gap-5 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      StatCard,
+      {
+        title: "Pageviews",
+        value: overview?.pageviews?.total ?? 0,
+        changePercent: overview?.pageviews?.changePercent,
+        loading
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      StatCard,
+      {
+        title: "Visitors",
+        value: overview?.visitors?.total ?? 0,
+        changePercent: overview?.visitors?.changePercent,
+        loading
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      StatCard,
+      {
+        title: "Sessions",
+        value: overview?.sessions?.total ?? 0,
+        changePercent: overview?.sessions?.changePercent,
+        loading
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      StatCard,
+      {
+        title: "Events",
+        value: overview?.events?.total ?? 0,
+        changePercent: overview?.events?.changePercent,
+        loading
+      }
+    )
+  ] });
+}
+
+// src/widgets/TimeSeriesChart.tsx
+var import_react8 = require("react");
+var import_recharts2 = require("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
+var import_jsx_runtime10 = require("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] = (0, import_react8.useState)(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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `rounded-xl bg-[rgb(var(--lm-bg))] border border-[rgb(var(--lm-border))] p-6 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-medium text-[rgb(var(--lm-text-secondary))]", children: "Overview" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex gap-1", children: metrics.map((m) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-64", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-full bg-[rgb(var(--lm-bg-secondary))] rounded-lg animate-pulse" }) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-full flex items-center justify-center text-[rgb(var(--lm-text-tertiary))] text-sm", children: "No data for this period" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_recharts2.AreaChart, { data, margin: { top: 4, right: 4, bottom: 0, left: -20 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("linearGradient", { id: "lm-chartGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { offset: "0%", stopColor: fillColor, stopOpacity: 0.2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { offset: "100%", stopColor: fillColor, stopOpacity: 0 })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor, vertical: false }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_recharts2.XAxis,
+        {
+          dataKey: "date",
+          tickFormatter: (v) => formatDate(v, period),
+          tick: { fontSize: 11, fill: axisColor },
+          tickLine: false,
+          axisLine: { stroke: gridColor },
+          interval: "preserveStartEnd",
+          minTickGap: 40
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_recharts2.YAxis,
+        {
+          tick: { fontSize: 11, fill: axisColor },
+          tickLine: false,
+          axisLine: false,
+          allowDecimals: false
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_recharts2.Tooltip,
+        {
+          content: ({ active, payload }) => {
+            if (!active || !payload?.[0]) return null;
+            const point = payload[0].payload;
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("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__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[rgb(var(--lm-tooltip-muted))] mb-0.5", children: formatTooltipDate(point.date, period) }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "font-medium", children: [
+                point.value.toLocaleString(),
+                " ",
+                metric
+              ] })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_recharts2.Area,
+        {
+          type: "monotone",
+          dataKey: "value",
+          stroke: strokeColor,
+          strokeWidth: 2,
+          fill: "url(#lm-chartGradient)"
+        }
+      )
+    ] }) }) })
+  ] });
+}
+
+// src/widgets/TopPages.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function TopPages({ period, limit = 10, className }) {
+  const { data, isLoading } = useStats("top_pages", { period, limit });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TopList, { title: "Pages", type: "pages", data: data?.data ?? null, loading: isLoading, className });
+}
+
+// src/widgets/TopReferrers.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function TopReferrers({ period, limit = 10, className }) {
+  const { data, isLoading } = useStats("top_referrers", { period, limit });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TopList, { title: "Referrers", type: "referrers", data: data?.data ?? null, loading: isLoading, className });
+}
+
+// src/widgets/TopCountries.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function TopCountries({ period, limit = 10, className }) {
+  const { data, isLoading } = useStats("top_countries", { period, limit });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TopList, { title: "Countries", type: "countries", data: data?.data ?? null, loading: isLoading, className });
+}
+
+// src/widgets/TopEvents.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function TopEvents({ period, limit = 10, className }) {
+  const { data, isLoading } = useStats("top_events", { period, limit });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TopList, { title: "Events", type: "events", data: data?.data ?? null, loading: isLoading, className });
+}
+
+// src/widgets/TopBrowsers.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function TopBrowsers({ period, limit = 10, className }) {
+  const { data, isLoading } = useStats("top_browsers", { period, limit });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TopList, { title: "Browsers", type: "browsers", data: data?.data ?? null, loading: isLoading, className });
+}
+
+// src/widgets/TopDevices.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function TopDevices({ period, limit = 10, className }) {
+  const { data, isLoading } = useStats("top_devices", { period, limit });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TopList, { title: "Devices", type: "devices", data: data?.data ?? null, loading: isLoading, className });
+}
+
+// src/widgets/BrowsersChart.tsx
+var import_jsx_runtime17 = require("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__ */ (0, import_jsx_runtime17.jsx)(PieChartCard, { title: "Browsers", data: pieData, loading: isLoading, className });
+}
+
+// src/widgets/DevicesChart.tsx
+var import_jsx_runtime18 = require("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__ */ (0, import_jsx_runtime18.jsx)(PieChartCard, { title: "Devices", data: pieData, loading: isLoading, className });
+}
+
+// src/widgets/WorldMap.tsx
+var import_react9 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var geoUrl = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json";
+var WorldMapInner2 = (0, import_react9.lazy)(() => Promise.resolve().then(() => (init_WorldMapInner(), WorldMapInner_exports)));
+var WorldMap = (0, import_react9.memo)(function WorldMap2({ period, className }) {
+  const [tooltip, setTooltip] = (0, import_react9.useState)(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__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `rounded-xl bg-[rgb(var(--lm-bg))] border border-[rgb(var(--lm-border))] p-5 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-xs font-medium text-[rgb(var(--lm-text-tertiary))] uppercase tracking-wide mb-3", children: "Visitors by Country" }),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "h-64 bg-[rgb(var(--lm-bg-secondary))] rounded-lg animate-pulse" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react9.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsx)(
+      WorldMapInner2,
+      {
+        geoUrl,
+        countryData,
+        getColor,
+        setTooltip,
+        strokeColor,
+        hoverColor
+      }
+    ) }),
+    tooltip && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "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__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-medium", children: tooltip.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-[rgb(var(--lm-tooltip-muted))]", children: [
+            tooltip.value.toLocaleString(),
+            " visitor",
+            tooltip.value !== 1 ? "s" : ""
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+
+// src/widgets/AnalyticsDashboard.tsx
+var import_jsx_runtime21 = require("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__ */ (0, import_jsx_runtime21.jsxs)("div", { className, children: [
+    (showPeriodSelector || showExport) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between mb-6 flex-wrap gap-3", children: [
+      showPeriodSelector && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        PeriodSelector,
+        {
+          value: effectivePeriod,
+          onChange: setPeriod,
+          dateFrom,
+          dateTo,
+          onDateFromChange: setDateFrom,
+          onDateToChange: setDateTo
+        }
+      ),
+      showExport && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ExportButton, { data: [], filename: `analytics-${effectivePeriod}` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TimeSeriesChart, { period: effectivePeriod, className: "mb-6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StatCards, { period: effectivePeriod, className: "mb-6" }),
+    showWorldMap && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(WorldMap, { period: effectivePeriod, className: "mb-6" }),
+    showPieCharts && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5 mb-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BrowsersChart, { period: effectivePeriod }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DevicesChart, { period: effectivePeriod })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TopPages, { period: effectivePeriod }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TopReferrers, { period: effectivePeriod }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TopCountries, { period: effectivePeriod }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TopEvents, { period: effectivePeriod }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TopBrowsers, { period: effectivePeriod }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TopDevices, { period: effectivePeriod })
+    ] })
+  ] });
+}
+
+// src/utils/index.ts
+init_worldmap_data();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  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.cjs.map