@analytix/dashboard 0.2.3 → 0.2.4

package/dist/AnalyticsDashboard.js

@@ -3,9 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from "react";
 import { DEFAULT_DASHBOARD_WIDGETS, percentChange } from "@analytix/core";
 import { Area, CartesianGrid, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
-import { Download, Eye, Users, Clock, MousePointerClick, Repeat, FileText, UserPlus, UserCheck, Moon, Sun, SlidersHorizontal, } from "lucide-react";
+import { Download, Eye, Users, Clock, MousePointerClick, Repeat, FileText, UserPlus, UserCheck, Sun, Moon, Monitor, SlidersHorizontal, } from "lucide-react";
 import { AnalyticsDashboardSkeleton } from "./AnalyticsDashboardSkeleton";
 import { useDashboardWidgets } from "./useDashboardWidgets";
+import { DASHBOARD_THEME_LABELS, useDashboardTheme } from "./useDashboardTheme";
 import { WidgetCustomizePanel } from "./WidgetCustomizePanel";
 function formatBucketLabel(value, granularity) {
     const date = new Date(value);
@@ -32,21 +33,6 @@ function Delta({ current, previous }) {
 function BreakdownPanel({ title, emptyMessage, rows, }) {
     return (_jsxs("div", { className: "chartPanel", children: [_jsx("div", { className: "panelTitle", children: title }), rows.length === 0 ? (_jsx("p", { className: "emptyState", children: emptyMessage })) : (_jsx("ul", { className: "list", children: rows.map((row) => (_jsxs("li", { children: [_jsx("span", { className: "listLabel", children: row.label }), _jsx("span", { className: "listValue", children: row.value })] }, row.key))) }))] }));
 }
-function useResolvedTheme(mode) {
-    const [resolved, setResolved] = useState("light");
-    useEffect(() => {
-        if (mode !== "system") {
-            setResolved(mode);
-            return;
-        }
-        const media = window.matchMedia("(prefers-color-scheme: dark)");
-        const apply = () => setResolved(media.matches ? "dark" : "light");
-        apply();
-        media.addEventListener("change", apply);
-        return () => media.removeEventListener("change", apply);
-    }, [mode]);
-    return resolved;
-}
 export function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, loadingFallback, defaultTheme = "system", defaultWidgets = DEFAULT_DASHBOARD_WIDGETS, settingsEndpoint, onWidgetsSaved, onWidgetsSaveError, }) {
     const summaryUrl = summaryEndpoint ?? `/api/v1/sites/${siteId}/summary`;
     const exportUrl = exportEndpoint ?? `/api/v1/sites/${siteId}/export`;
@@ -63,8 +49,7 @@ export function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, lo
     const [initialLoading, setInitialLoading] = useState(true);
     const [refreshing, setRefreshing] = useState(false);
     const [error, setError] = useState("");
-    const [themeMode, setThemeMode] = useState(defaultTheme);
-    const resolvedTheme = useResolvedTheme(themeMode);
+    const { themeMode, cycleTheme, resolvedTheme } = useDashboardTheme(siteId, defaultTheme);
     const hasLoadedRef = useRef(false);
     const [showWidgetCustomize, setShowWidgetCustomize] = useState(false);
     const [savingDefaultWidgets, setSavingDefaultWidgets] = useState(false);
@@ -196,9 +181,7 @@ export function AnalyticsDashboard({ siteId, summaryEndpoint, exportEndpoint, lo
             setSavingDefaultWidgets(false);
         }
     }
-    return (_jsxs("div", { className: `analytix-dash ${themeClass}${refreshing ? " analytix-refreshing" : ""}`, children: [_jsxs("div", { className: "toolbar", children: [_jsxs("span", { className: "realtime", children: [summary.realtime_visitors, " visitors in the last 15 minutes"] }), _jsxs("div", { className: "toolbarActions", children: [_jsx("button", { type: "button", className: "btn btnIcon", onClick: () => setShowWidgetCustomize((open) => !open), "aria-label": "Customize widgets", children: _jsx(SlidersHorizontal, { size: 16 }) }), _jsx("button", { type: "button", className: "btn btnIcon", onClick: () => setThemeMode((current) => current === "dark" || (current === "system" && resolvedTheme === "dark")
-                                    ? "light"
-                                    : "dark"), "aria-label": "Toggle theme", children: resolvedTheme === "dark" ? _jsx(Sun, { size: 16 }) : _jsx(Moon, { size: 16 }) }), _jsxs("a", { className: "btn", href: `${exportUrl}?${filterParams.toString()}`, children: [_jsx(Download, { size: 14 }), "Export CSV"] })] })] }), showWidgetCustomize ? (_jsx(WidgetCustomizePanel, { widgets: widgets, onToggle: toggleWidget, onReset: resetToDefault, onSaveDefault: settingsEndpoint ? saveDefaultWidgets : undefined, savingDefault: savingDefaultWidgets })) : null, _jsxs("div", { className: "filters", children: [_jsxs("div", { className: "filterGroup filterGroupWide", children: [_jsx("span", { className: "filterLabel", children: "Range" }), _jsxs("div", { className: "chips", children: [["24h", "7d", "30d", "90d"].map((key) => (_jsx("button", { type: "button", className: !useCustomRange && range === key ? "chipActive" : "chip", onClick: () => {
+    return (_jsxs("div", { className: `analytix-dash ${themeClass}${refreshing ? " analytix-refreshing" : ""}`, children: [_jsxs("div", { className: "toolbar", children: [_jsxs("span", { className: "realtime", children: [summary.realtime_visitors, " visitors in the last 15 minutes"] }), _jsxs("div", { className: "toolbarActions", children: [_jsx("button", { type: "button", className: "btn btnIcon", onClick: () => setShowWidgetCustomize((open) => !open), "aria-label": "Customize widgets", children: _jsx(SlidersHorizontal, { size: 16 }) }), _jsx("button", { type: "button", className: "btn btnIcon", onClick: cycleTheme, "aria-label": `Theme: ${DASHBOARD_THEME_LABELS[themeMode]}. Click to change.`, title: `Theme: ${DASHBOARD_THEME_LABELS[themeMode]}`, children: themeMode === "system" ? (_jsx(Monitor, { size: 16 })) : resolvedTheme === "dark" ? (_jsx(Sun, { size: 16 })) : (_jsx(Moon, { size: 16 })) }), _jsxs("a", { className: "btn", href: `${exportUrl}?${filterParams.toString()}`, children: [_jsx(Download, { size: 14 }), "Export CSV"] })] })] }), showWidgetCustomize ? (_jsx(WidgetCustomizePanel, { widgets: widgets, onToggle: toggleWidget, onReset: resetToDefault, onSaveDefault: settingsEndpoint ? saveDefaultWidgets : undefined, savingDefault: savingDefaultWidgets })) : null, _jsxs("div", { className: "filters", children: [_jsxs("div", { className: "filterGroup filterGroupWide", children: [_jsx("span", { className: "filterLabel", children: "Range" }), _jsxs("div", { className: "chips", children: [["24h", "7d", "30d", "90d"].map((key) => (_jsx("button", { type: "button", className: !useCustomRange && range === key ? "chipActive" : "chip", onClick: () => {
                                             setUseCustomRange(false);
                                             setRange(key);
                                         }, children: key }, key))), _jsx("button", { type: "button", className: useCustomRange ? "chipActive" : "chip", onClick: () => setUseCustomRange(true), children: "Custom" })] }), useCustomRange && (_jsxs("div", { className: "dateRangeRow", children: [_jsxs("label", { children: [_jsx("span", { className: "filterLabel", children: "From" }), _jsx("input", { type: "date", value: customFrom, max: customTo, onChange: (e) => setCustomFrom(e.target.value) })] }), _jsxs("label", { children: [_jsx("span", { className: "filterLabel", children: "To" }), _jsx("input", { type: "date", value: customTo, min: customFrom, max: toDateInputValue(new Date()), onChange: (e) => setCustomTo(e.target.value) })] })] }))] }), _jsxs("div", { className: "filterGroup", children: [_jsx("span", { className: "filterLabel", children: "Granularity" }), _jsx("div", { className: "chips", children: ["hour", "day"].map((key) => (_jsx("button", { type: "button", className: granularity === key ? "chipActive" : "chip", onClick: () => setGranularity(key), children: key }, key))) })] }), _jsxs("div", { className: "filterGroup", children: [_jsx("span", { className: "filterLabel", children: "Scope" }), _jsx("div", { className: "chips", children: ["all", "page", "blog"].map((key) => (_jsx("button", { type: "button", className: trafficScope === key ? "chipActive" : "chip", onClick: () => setTrafficScope(key), children: key }, key))) })] }), trafficScope === "page" && (_jsxs("div", { className: "filterGroup filterGroupWide textField", children: [_jsx("span", { className: "filterLabel", children: "Path" }), _jsx("input", { value: path, onChange: (e) => setPath(e.target.value), placeholder: "/pricing" }), path.trim() === "/blog" && (_jsxs("label", { className: "checkboxRow", children: [_jsx("input", { type: "checkbox", checked: includeBlogArticles, onChange: (e) => setIncludeBlogArticles(e.target.checked) }), "Include blog articles"] }))] })), trafficScope === "blog" && (_jsxs("div", { className: "filterGroup filterGroupWide textField", children: [_jsx("span", { className: "filterLabel", children: "Content ID (optional)" }), _jsx("input", { value: contentId, onChange: (e) => setContentId(e.target.value), placeholder: "Filter to a single article" })] }))] }), isVisible("metrics") ? (_jsxs("div", { className: "metrics", children: [_jsxs("div", { className: "metricCard", children: [_jsx(Eye, { size: 18 }), _jsx("span", { className: "metricValue", children: formatNumber(summary.total_page_views) }), _jsx("span", { className: "metricLabel", children: "Page views" }), _jsx(Delta, { current: summary.total_page_views, previous: prev?.total_page_views })] }), _jsxs("div", { className: "metricCard", children: [_jsx(Users, { size: 18 }), _jsx("span", { className: "metricValue", children: formatNumber(summary.unique_visitors) }), _jsx("span", { className: "metricLabel", children: "Unique visitors" }), _jsx(Delta, { current: summary.unique_visitors, previous: prev?.unique_visitors })] }), _jsxs("div", { className: "metricCard", children: [_jsx(Repeat, { size: 18 }), _jsx("span", { className: "metricValue", children: formatNumber(summary.total_sessions) }), _jsx("span", { className: "metricLabel", children: "Sessions" }), _jsx(Delta, { current: summary.total_sessions, previous: prev?.total_sessions })] }), _jsxs("div", { className: "metricCard", children: [_jsx(FileText, { size: 18 }), _jsx("span", { className: "metricValue", children: summary.pages_per_session.toFixed(2) }), _jsx("span", { className: "metricLabel", children: "Pages / session" })] }), _jsxs("div", { className: "metricCard", children: [_jsx(UserPlus, { size: 18 }), _jsx("span", { className: "metricValue", children: formatNumber(summary.new_visitors) }), _jsx("span", { className: "metricLabel", children: "New visitors" })] }), _jsxs("div", { className: "metricCard", children: [_jsx(UserCheck, { size: 18 }), _jsx("span", { className: "metricValue", children: formatNumber(summary.returning_visitors) }), _jsx("span", { className: "metricLabel", children: "Returning visitors" })] }), _jsxs("div", { className: "metricCard", children: [_jsx(MousePointerClick, { size: 18 }), _jsxs("span", { className: "metricValue", children: [summary.bounce_rate, "%"] }), _jsx("span", { className: "metricLabel", children: "Bounce rate" }), _jsx(Delta, { current: summary.bounce_rate, previous: prev?.bounce_rate })] }), _jsxs("div", { className: "metricCard", children: [_jsx(Clock, { size: 18 }), _jsxs("span", { className: "metricValue", children: [summary.avg_engagement_seconds, "s"] }), _jsx("span", { className: "metricLabel", children: "Avg engagement" }), _jsx(Delta, { current: summary.avg_engagement_seconds, previous: prev?.avg_engagement_seconds })] })] })) : null, isVisible("chart") ? (_jsxs("div", { className: "chartPanel", children: [_jsx("div", { className: "panelTitle", children: "Traffic over time" }), _jsx("div", { className: "chartContainer", children: chartData.length === 0 ? (_jsx("p", { className: "emptyState", children: "No traffic recorded for this period." })) : (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: chartData, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), _jsx(XAxis, { dataKey: "label", tick: { fontSize: 12, fill: "var(--ax-muted)" } }), _jsx(YAxis, { tick: { fontSize: 12, fill: "var(--ax-muted)" } }), _jsx(Tooltip, { contentStyle: {

package/dist/AnalyticsDashboardSkeleton.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function AnalyticsDashboardSkeleton() {
-    return (_jsxs("div", { className: "analytix-dash analytix-skeleton", "aria-busy": "true", "aria-label": "Loading analytics", children: [_jsxs("div", { className: "toolbar", children: [_jsx("div", { className: "sk skRealtime" }), _jsx("div", { className: "sk skBtn" })] }), _jsx("div", { className: "filters", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "filterGroup", children: [_jsx("div", { className: "sk skLabel" }), _jsxs("div", { className: "skRow", children: [_jsx("div", { className: "sk skChip" }), _jsx("div", { className: "sk skChip" }), _jsx("div", { className: "sk skChip" })] })] }, i))) }), _jsx("div", { className: "metrics", children: Array.from({ length: 7 }).map((_, i) => (_jsxs("div", { className: "metricCard", children: [_jsx("div", { className: "sk skIcon" }), _jsx("div", { className: "sk skMetricValue" }), _jsx("div", { className: "sk skMetricLabel" }), _jsx("div", { className: "sk skDelta" })] }, i))) }), _jsxs("div", { className: "chartPanel", children: [_jsx("div", { className: "sk skPanelTitle" }), _jsx("div", { className: "sk skChart" })] }), _jsx("div", { className: "splitPanels", children: Array.from({ length: 2 }).map((_, i) => (_jsxs("div", { className: "chartPanel", children: [_jsx("div", { className: "sk skPanelTitle" }), _jsx("div", { className: "skList", children: Array.from({ length: 5 }).map((__, j) => (_jsx("div", { className: "sk skListRow" }, j))) })] }, i))) })] }));
+    return (_jsxs("div", { className: "analytix-dash analytix-theme-light analytix-skeleton", "aria-busy": "true", "aria-label": "Loading analytics", children: [_jsxs("div", { className: "toolbar", children: [_jsx("div", { className: "sk skRealtime" }), _jsx("div", { className: "sk skBtn" })] }), _jsx("div", { className: "filters", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "filterGroup", children: [_jsx("div", { className: "sk skLabel" }), _jsxs("div", { className: "skRow", children: [_jsx("div", { className: "sk skChip" }), _jsx("div", { className: "sk skChip" }), _jsx("div", { className: "sk skChip" })] })] }, i))) }), _jsx("div", { className: "metrics", children: Array.from({ length: 7 }).map((_, i) => (_jsxs("div", { className: "metricCard", children: [_jsx("div", { className: "sk skIcon" }), _jsx("div", { className: "sk skMetricValue" }), _jsx("div", { className: "sk skMetricLabel" }), _jsx("div", { className: "sk skDelta" })] }, i))) }), _jsxs("div", { className: "chartPanel", children: [_jsx("div", { className: "sk skPanelTitle" }), _jsx("div", { className: "sk skChart" })] }), _jsx("div", { className: "splitPanels", children: Array.from({ length: 2 }).map((_, i) => (_jsxs("div", { className: "chartPanel", children: [_jsx("div", { className: "sk skPanelTitle" }), _jsx("div", { className: "skList", children: Array.from({ length: 5 }).map((__, j) => (_jsx("div", { className: "sk skListRow" }, j))) })] }, i))) })] }));
 }

package/dist/dashboard.css

@@ -1,42 +1,55 @@
+/**
+ * Embeddable dashboard styles.
+ * Host apps may override tokens via --analytix-dash-* on a parent element.
+ */
 .analytix-dash {
-  --ax-primary: #0f172a;
-  --ax-muted: #64748b;
-  --ax-accent: #0052ff;
-  --ax-surface: rgba(255, 255, 255, 0.72);
-  --ax-surface-solid: #ffffff;
-  --ax-border: rgba(15, 23, 42, 0.08);
-  --ax-success: #047857;
-  --ax-success-bg: rgba(5, 150, 105, 0.08);
-  --ax-danger: #dc2626;
-  --ax-up: #059669;
-  --ax-down: #dc2626;
-  --ax-chart-grid: rgba(15, 23, 42, 0.08);
+  --ax-primary: var(--analytix-dash-ink, #111111);
+  --ax-muted: var(--analytix-dash-muted, #787774);
+  --ax-accent: var(--analytix-dash-accent, #111111);
+  --ax-surface: var(--analytix-dash-surface, rgba(255, 255, 255, 0.82));
+  --ax-surface-solid: var(--analytix-dash-surface-solid, #ffffff);
+  --ax-border: var(--analytix-dash-border, rgba(17, 17, 17, 0.08));
+  --ax-success: var(--analytix-dash-success, #346538);
+  --ax-success-bg: var(--analytix-dash-success-bg, #edf3ec);
+  --ax-danger: var(--analytix-dash-danger, #9f2f2d);
+  --ax-up: #346538;
+  --ax-down: #9f2f2d;
+  --ax-chart-grid: rgba(17, 17, 17, 0.08);
   display: flex;
   flex-direction: column;
   gap: 24px;
   width: 100%;
+  min-width: 0;
   color: var(--ax-primary);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: var(
+    --analytix-dash-font,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif
+  );
 }
 
 .analytix-dash.analytix-theme-dark {
-  --ax-primary: #e2e8f0;
-  --ax-muted: #94a3b8;
-  --ax-accent: #60a5fa;
-  --ax-surface: rgba(15, 23, 42, 0.72);
-  --ax-surface-solid: #0f172a;
-  --ax-border: rgba(148, 163, 184, 0.18);
-  --ax-success: #34d399;
-  --ax-success-bg: rgba(52, 211, 153, 0.12);
-  --ax-up: #34d399;
-  --ax-down: #f87171;
-  --ax-chart-grid: rgba(148, 163, 184, 0.15);
+  --ax-primary: var(--analytix-dash-ink, #f7f6f3);
+  --ax-muted: var(--analytix-dash-muted, #9b9a97);
+  --ax-accent: var(--analytix-dash-accent, #f7f6f3);
+  --ax-surface: var(--analytix-dash-surface, rgba(25, 25, 24, 0.88));
+  --ax-surface-solid: var(--analytix-dash-surface-solid, #191918);
+  --ax-border: var(--analytix-dash-border, rgba(255, 255, 255, 0.1));
+  --ax-success: #6ee7b7;
+  --ax-success-bg: rgba(52, 101, 56, 0.22);
+  --ax-danger: #fca5a5;
+  --ax-up: #6ee7b7;
+  --ax-down: #fca5a5;
+  --ax-chart-grid: rgba(255, 255, 255, 0.08);
 }
 
 .analytix-dash.analytix-refreshing {
   opacity: 0.72;
   pointer-events: none;
-  transition: opacity 0.15s ease;
+  transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .analytix-dash .filters {
@@ -45,7 +58,7 @@
   gap: 14px;
   padding: 18px;
   border: 1px solid var(--ax-border);
-  border-radius: 14px;
+  border-radius: 12px;
   background: var(--ax-surface);
 }
 
@@ -83,17 +96,33 @@
   font-weight: 600;
   cursor: pointer;
   color: var(--ax-muted);
+  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    background 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    color 160ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .analytix-dash .chip:hover {
+    color: var(--ax-primary);
+    border-color: var(--ax-accent);
+  }
+}
+
+.analytix-dash .chip:active,
+.analytix-dash .chipActive:active {
+  transform: scale(0.97);
 }
 
 .analytix-dash .chipActive {
-  background: rgba(0, 82, 255, 0.08);
-  border-color: rgba(0, 82, 255, 0.18);
+  background: rgba(17, 17, 17, 0.06);
+  border-color: rgba(17, 17, 17, 0.14);
   color: var(--ax-accent);
 }
 
 .analytix-dash.analytix-theme-dark .chipActive {
-  background: rgba(96, 165, 250, 0.14);
-  border-color: rgba(96, 165, 250, 0.28);
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.16);
 }
 
 .analytix-dash .dateRangeRow {
@@ -115,9 +144,17 @@
   font: inherit;
   padding: 10px 12px;
   border: 1px solid var(--ax-border);
-  border-radius: 10px;
+  border-radius: 8px;
   background: var(--ax-surface-solid);
   color: var(--ax-primary);
+  transition: border-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.analytix-dash .textField input:focus,
+.analytix-dash .dateRangeRow input:focus,
+.analytix-dash select:focus {
+  outline: none;
+  border-color: var(--ax-accent);
 }
 
 .analytix-dash .checkboxRow {
@@ -139,7 +176,7 @@
   flex-direction: column;
   gap: 8px;
   padding: 18px;
-  border-radius: 14px;
+  border-radius: 12px;
   border: 1px solid var(--ax-border);
   background: var(--ax-surface);
   color: var(--ax-accent);
@@ -151,6 +188,7 @@
   font-weight: 600;
   color: var(--ax-primary);
   line-height: 1.2;
+  font-variant-numeric: tabular-nums;
 }
 
 .analytix-dash .metricLabel {
@@ -173,7 +211,7 @@
 
 .analytix-dash .chartPanel {
   padding: 18px;
-  border-radius: 14px;
+  border-radius: 12px;
   border: 1px solid var(--ax-border);
   background: var(--ax-surface);
   min-width: 0;
@@ -183,11 +221,15 @@
   width: 100%;
   height: 280px;
   min-height: 280px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .analytix-dash .panelTitle {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 700;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--ax-muted);
   margin-bottom: 14px;
@@ -250,6 +292,7 @@
   display: flex;
   gap: 8px;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .analytix-dash .btn {
@@ -265,6 +308,18 @@
   font-weight: 600;
   color: var(--ax-primary);
   text-decoration: none;
+  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    background 160ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .analytix-dash .btn:hover {
+    background: var(--ax-surface);
+  }
+}
+
+.analytix-dash .btn:active {
+  transform: scale(0.97);
 }
 
 .analytix-dash .btnIcon {
@@ -272,27 +327,49 @@
 }
 
 .analytix-dash .realtime {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   padding: 10px 14px;
-  border-radius: 10px;
+  border-radius: 9999px;
   background: var(--ax-success-bg);
   color: var(--ax-success);
   font-size: 0.875rem;
   font-weight: 600;
 }
 
+.analytix-dash .realtime::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.85;
+}
+
 /* Skeleton */
 .analytix-dash.analytix-skeleton .sk {
   border-radius: 8px;
   background: linear-gradient(
     90deg,
-    rgba(148, 163, 184, 0.12) 0%,
-    rgba(148, 163, 184, 0.22) 50%,
-    rgba(148, 163, 184, 0.12) 100%
+    rgba(120, 119, 116, 0.1) 0%,
+    rgba(120, 119, 116, 0.18) 50%,
+    rgba(120, 119, 116, 0.1) 100%
   );
   background-size: 200% 100%;
   animation: analytix-shimmer 1.4s ease-in-out infinite;
 }
 
+.analytix-dash.analytix-theme-dark.analytix-skeleton .sk {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.06) 0%,
+    rgba(255, 255, 255, 0.12) 50%,
+    rgba(255, 255, 255, 0.06) 100%
+  );
+  background-size: 200% 100%;
+}
+
 .analytix-dash.analytix-skeleton .skRow {
   display: flex;
   gap: 6px;
@@ -302,6 +379,7 @@
 .analytix-dash.analytix-skeleton .skRealtime {
   width: 260px;
   height: 40px;
+  border-radius: 9999px;
 }
 
 .analytix-dash.analytix-skeleton .skBtn {
@@ -372,6 +450,17 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .analytix-dash.analytix-skeleton .sk {
+    animation: none;
+    background: rgba(120, 119, 116, 0.12);
+  }
+
+  .analytix-dash.analytix-theme-dark.analytix-skeleton .sk {
+    background: rgba(255, 255, 255, 0.08);
+  }
+}
+
 @media (max-width: 900px) {
   .analytix-dash .filters,
   .analytix-dash .splitPanels {

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export { AnalyticsDashboard, type AnalyticsDashboardProps } from "./AnalyticsDas
 export { AnalyticsDashboardSkeleton } from "./AnalyticsDashboardSkeleton";
 export { WidgetCustomizePanel } from "./WidgetCustomizePanel";
 export { useDashboardWidgets } from "./useDashboardWidgets";
+export { useDashboardTheme, DASHBOARD_THEME_LABELS, type DashboardThemeMode } from "./useDashboardTheme";

package/dist/index.js

@@ -2,3 +2,4 @@ export { AnalyticsDashboard } from "./AnalyticsDashboard";
 export { AnalyticsDashboardSkeleton } from "./AnalyticsDashboardSkeleton";
 export { WidgetCustomizePanel } from "./WidgetCustomizePanel";
 export { useDashboardWidgets } from "./useDashboardWidgets";
+export { useDashboardTheme, DASHBOARD_THEME_LABELS } from "./useDashboardTheme";

package/dist/useDashboardTheme.d.ts

@@ -0,0 +1,8 @@
+export type DashboardThemeMode = "light" | "dark" | "system";
+export declare function useDashboardTheme(siteId: string, defaultTheme?: DashboardThemeMode): {
+    themeMode: DashboardThemeMode;
+    setThemeMode: (next: DashboardThemeMode) => void;
+    cycleTheme: () => void;
+    resolvedTheme: "light" | "dark";
+};
+export declare const DASHBOARD_THEME_LABELS: Record<DashboardThemeMode, string>;

package/dist/useDashboardTheme.js

@@ -0,0 +1,51 @@
+"use client";
+import { useEffect, useState } from "react";
+const STORAGE_PREFIX = "analytix_dashboard_theme";
+function storageKey(siteId) {
+    return `${STORAGE_PREFIX}_${siteId}`;
+}
+function readStoredTheme(siteId, fallback) {
+    if (typeof window === "undefined")
+        return fallback;
+    const stored = localStorage.getItem(storageKey(siteId));
+    if (stored === "light" || stored === "dark" || stored === "system")
+        return stored;
+    return fallback;
+}
+export function useDashboardTheme(siteId, defaultTheme = "system") {
+    const [themeMode, setThemeModeState] = useState(defaultTheme);
+    useEffect(() => {
+        setThemeModeState(readStoredTheme(siteId, defaultTheme));
+    }, [siteId, defaultTheme]);
+    useEffect(() => {
+        localStorage.setItem(storageKey(siteId), themeMode);
+    }, [siteId, themeMode]);
+    function setThemeMode(next) {
+        setThemeModeState(next);
+    }
+    function cycleTheme() {
+        setThemeModeState((current) => current === "light" ? "dark" : current === "dark" ? "system" : "light");
+    }
+    const resolvedTheme = useResolvedTheme(themeMode);
+    return { themeMode, setThemeMode, cycleTheme, resolvedTheme };
+}
+function useResolvedTheme(mode) {
+    const [resolved, setResolved] = useState("light");
+    useEffect(() => {
+        if (mode !== "system") {
+            setResolved(mode);
+            return;
+        }
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        const apply = () => setResolved(media.matches ? "dark" : "light");
+        apply();
+        media.addEventListener("change", apply);
+        return () => media.removeEventListener("change", apply);
+    }, [mode]);
+    return resolved;
+}
+export const DASHBOARD_THEME_LABELS = {
+    light: "Light",
+    dark: "Dark",
+    system: "System",
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analytix/dashboard",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Analytix embeddable analytics dashboard UI",
   "type": "module",
   "main": "./dist/index.js",
@@ -36,7 +36,7 @@
     "lucide-react": ">=0.400"
   },
   "dependencies": {
-    "@analytix/core": "^0.3.0"
+    "@analytix/core": "^0.3.1"
   },
   "devDependencies": {
     "@types/react": "^19",

package/src/dashboard.css

@@ -1,42 +1,55 @@
+/**
+ * Embeddable dashboard styles.
+ * Host apps may override tokens via --analytix-dash-* on a parent element.
+ */
 .analytix-dash {
-  --ax-primary: #0f172a;
-  --ax-muted: #64748b;
-  --ax-accent: #0052ff;
-  --ax-surface: rgba(255, 255, 255, 0.72);
-  --ax-surface-solid: #ffffff;
-  --ax-border: rgba(15, 23, 42, 0.08);
-  --ax-success: #047857;
-  --ax-success-bg: rgba(5, 150, 105, 0.08);
-  --ax-danger: #dc2626;
-  --ax-up: #059669;
-  --ax-down: #dc2626;
-  --ax-chart-grid: rgba(15, 23, 42, 0.08);
+  --ax-primary: var(--analytix-dash-ink, #111111);
+  --ax-muted: var(--analytix-dash-muted, #787774);
+  --ax-accent: var(--analytix-dash-accent, #111111);
+  --ax-surface: var(--analytix-dash-surface, rgba(255, 255, 255, 0.82));
+  --ax-surface-solid: var(--analytix-dash-surface-solid, #ffffff);
+  --ax-border: var(--analytix-dash-border, rgba(17, 17, 17, 0.08));
+  --ax-success: var(--analytix-dash-success, #346538);
+  --ax-success-bg: var(--analytix-dash-success-bg, #edf3ec);
+  --ax-danger: var(--analytix-dash-danger, #9f2f2d);
+  --ax-up: #346538;
+  --ax-down: #9f2f2d;
+  --ax-chart-grid: rgba(17, 17, 17, 0.08);
   display: flex;
   flex-direction: column;
   gap: 24px;
   width: 100%;
+  min-width: 0;
   color: var(--ax-primary);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: var(
+    --analytix-dash-font,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif
+  );
 }
 
 .analytix-dash.analytix-theme-dark {
-  --ax-primary: #e2e8f0;
-  --ax-muted: #94a3b8;
-  --ax-accent: #60a5fa;
-  --ax-surface: rgba(15, 23, 42, 0.72);
-  --ax-surface-solid: #0f172a;
-  --ax-border: rgba(148, 163, 184, 0.18);
-  --ax-success: #34d399;
-  --ax-success-bg: rgba(52, 211, 153, 0.12);
-  --ax-up: #34d399;
-  --ax-down: #f87171;
-  --ax-chart-grid: rgba(148, 163, 184, 0.15);
+  --ax-primary: var(--analytix-dash-ink, #f7f6f3);
+  --ax-muted: var(--analytix-dash-muted, #9b9a97);
+  --ax-accent: var(--analytix-dash-accent, #f7f6f3);
+  --ax-surface: var(--analytix-dash-surface, rgba(25, 25, 24, 0.88));
+  --ax-surface-solid: var(--analytix-dash-surface-solid, #191918);
+  --ax-border: var(--analytix-dash-border, rgba(255, 255, 255, 0.1));
+  --ax-success: #6ee7b7;
+  --ax-success-bg: rgba(52, 101, 56, 0.22);
+  --ax-danger: #fca5a5;
+  --ax-up: #6ee7b7;
+  --ax-down: #fca5a5;
+  --ax-chart-grid: rgba(255, 255, 255, 0.08);
 }
 
 .analytix-dash.analytix-refreshing {
   opacity: 0.72;
   pointer-events: none;
-  transition: opacity 0.15s ease;
+  transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .analytix-dash .filters {
@@ -45,7 +58,7 @@
   gap: 14px;
   padding: 18px;
   border: 1px solid var(--ax-border);
-  border-radius: 14px;
+  border-radius: 12px;
   background: var(--ax-surface);
 }
 
@@ -83,17 +96,33 @@
   font-weight: 600;
   cursor: pointer;
   color: var(--ax-muted);
+  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    background 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    color 160ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .analytix-dash .chip:hover {
+    color: var(--ax-primary);
+    border-color: var(--ax-accent);
+  }
+}
+
+.analytix-dash .chip:active,
+.analytix-dash .chipActive:active {
+  transform: scale(0.97);
 }
 
 .analytix-dash .chipActive {
-  background: rgba(0, 82, 255, 0.08);
-  border-color: rgba(0, 82, 255, 0.18);
+  background: rgba(17, 17, 17, 0.06);
+  border-color: rgba(17, 17, 17, 0.14);
   color: var(--ax-accent);
 }
 
 .analytix-dash.analytix-theme-dark .chipActive {
-  background: rgba(96, 165, 250, 0.14);
-  border-color: rgba(96, 165, 250, 0.28);
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.16);
 }
 
 .analytix-dash .dateRangeRow {
@@ -115,9 +144,17 @@
   font: inherit;
   padding: 10px 12px;
   border: 1px solid var(--ax-border);
-  border-radius: 10px;
+  border-radius: 8px;
   background: var(--ax-surface-solid);
   color: var(--ax-primary);
+  transition: border-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.analytix-dash .textField input:focus,
+.analytix-dash .dateRangeRow input:focus,
+.analytix-dash select:focus {
+  outline: none;
+  border-color: var(--ax-accent);
 }
 
 .analytix-dash .checkboxRow {
@@ -139,7 +176,7 @@
   flex-direction: column;
   gap: 8px;
   padding: 18px;
-  border-radius: 14px;
+  border-radius: 12px;
   border: 1px solid var(--ax-border);
   background: var(--ax-surface);
   color: var(--ax-accent);
@@ -151,6 +188,7 @@
   font-weight: 600;
   color: var(--ax-primary);
   line-height: 1.2;
+  font-variant-numeric: tabular-nums;
 }
 
 .analytix-dash .metricLabel {
@@ -173,7 +211,7 @@
 
 .analytix-dash .chartPanel {
   padding: 18px;
-  border-radius: 14px;
+  border-radius: 12px;
   border: 1px solid var(--ax-border);
   background: var(--ax-surface);
   min-width: 0;
@@ -183,11 +221,15 @@
   width: 100%;
   height: 280px;
   min-height: 280px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .analytix-dash .panelTitle {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 700;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--ax-muted);
   margin-bottom: 14px;
@@ -250,6 +292,7 @@
   display: flex;
   gap: 8px;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .analytix-dash .btn {
@@ -265,6 +308,18 @@
   font-weight: 600;
   color: var(--ax-primary);
   text-decoration: none;
+  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    background 160ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .analytix-dash .btn:hover {
+    background: var(--ax-surface);
+  }
+}
+
+.analytix-dash .btn:active {
+  transform: scale(0.97);
 }
 
 .analytix-dash .btnIcon {
@@ -272,27 +327,49 @@
 }
 
 .analytix-dash .realtime {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   padding: 10px 14px;
-  border-radius: 10px;
+  border-radius: 9999px;
   background: var(--ax-success-bg);
   color: var(--ax-success);
   font-size: 0.875rem;
   font-weight: 600;
 }
 
+.analytix-dash .realtime::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.85;
+}
+
 /* Skeleton */
 .analytix-dash.analytix-skeleton .sk {
   border-radius: 8px;
   background: linear-gradient(
     90deg,
-    rgba(148, 163, 184, 0.12) 0%,
-    rgba(148, 163, 184, 0.22) 50%,
-    rgba(148, 163, 184, 0.12) 100%
+    rgba(120, 119, 116, 0.1) 0%,
+    rgba(120, 119, 116, 0.18) 50%,
+    rgba(120, 119, 116, 0.1) 100%
   );
   background-size: 200% 100%;
   animation: analytix-shimmer 1.4s ease-in-out infinite;
 }
 
+.analytix-dash.analytix-theme-dark.analytix-skeleton .sk {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.06) 0%,
+    rgba(255, 255, 255, 0.12) 50%,
+    rgba(255, 255, 255, 0.06) 100%
+  );
+  background-size: 200% 100%;
+}
+
 .analytix-dash.analytix-skeleton .skRow {
   display: flex;
   gap: 6px;
@@ -302,6 +379,7 @@
 .analytix-dash.analytix-skeleton .skRealtime {
   width: 260px;
   height: 40px;
+  border-radius: 9999px;
 }
 
 .analytix-dash.analytix-skeleton .skBtn {
@@ -372,6 +450,17 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .analytix-dash.analytix-skeleton .sk {
+    animation: none;
+    background: rgba(120, 119, 116, 0.12);
+  }
+
+  .analytix-dash.analytix-theme-dark.analytix-skeleton .sk {
+    background: rgba(255, 255, 255, 0.08);
+  }
+}
+
 @media (max-width: 900px) {
   .analytix-dash .filters,
   .analytix-dash .splitPanels {