@contractspec/example.analytics-dashboard 0.0.0-canary-20260113170453

package/dist/ui/AnalyticsDashboard.js

@@ -0,0 +1,265 @@
+'use client';
+
+import { useAnalyticsData } from "./hooks/useAnalyticsData.js";
+import { useState } from "react";
+import { Button, ErrorState, LoaderBlock, StatCard, StatCardGroup } from "@contractspec/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ui/AnalyticsDashboard.tsx
+/**
+* Analytics Dashboard
+*
+* Interactive dashboard for the analytics-dashboard template.
+* Displays dashboards, widgets, and queries.
+*/
+const STATUS_COLORS = {
+	PUBLISHED: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+	DRAFT: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
+	ARCHIVED: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
+};
+const WIDGET_ICONS = {
+	LINE_CHART: "📈",
+	BAR_CHART: "📊",
+	PIE_CHART: "🥧",
+	AREA_CHART: "📉",
+	SCATTER_PLOT: "⚬",
+	METRIC: "🔢",
+	TABLE: "📋",
+	HEATMAP: "🗺️",
+	FUNNEL: "⏬",
+	MAP: "🌍",
+	TEXT: "📝",
+	EMBED: "🔗"
+};
+const QUERY_TYPE_COLORS = {
+	SQL: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+	METRIC: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
+	AGGREGATION: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
+	CUSTOM: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
+};
+function AnalyticsDashboard() {
+	const [activeTab, setActiveTab] = useState("dashboards");
+	const { dashboards, queries, selectedDashboard, widgets, loading, error, stats, refetch, selectDashboard } = useAnalyticsData();
+	const tabs = [{
+		id: "dashboards",
+		label: "Dashboards",
+		icon: "📊"
+	}, {
+		id: "queries",
+		label: "Queries",
+		icon: "🔍"
+	}];
+	if (loading) return /* @__PURE__ */ jsx(LoaderBlock, { label: "Loading Analytics..." });
+	if (error) return /* @__PURE__ */ jsx(ErrorState, {
+		title: "Failed to load Analytics",
+		description: error.message,
+		onRetry: refetch,
+		retryLabel: "Retry"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-bold",
+					children: "Analytics Dashboard"
+				}), /* @__PURE__ */ jsxs(Button, {
+					onClick: () => alert("Create dashboard modal"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mr-2",
+						children: "+"
+					}), " New Dashboard"]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(StatCardGroup, { children: [
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Dashboards",
+					value: stats.totalDashboards,
+					hint: `${stats.publishedDashboards} published`
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Queries",
+					value: stats.totalQueries,
+					hint: `${stats.sharedQueries} shared`
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Widgets",
+					value: widgets.length,
+					hint: "on current dashboard"
+				})
+			] }),
+			/* @__PURE__ */ jsx("nav", {
+				className: "bg-muted flex gap-1 rounded-lg p-1",
+				role: "tablist",
+				children: tabs.map((tab) => /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					role: "tab",
+					"aria-selected": activeTab === tab.id,
+					onClick: () => setActiveTab(tab.id),
+					className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+					children: [/* @__PURE__ */ jsx("span", { children: tab.icon }), tab.label]
+				}, tab.id))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-h-[400px]",
+				role: "tabpanel",
+				children: [activeTab === "dashboards" && /* @__PURE__ */ jsxs("div", {
+					className: "space-y-6",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+						children: [dashboards.map((dashboard) => /* @__PURE__ */ jsxs("div", {
+							onClick: () => selectDashboard(dashboard),
+							className: `border-border bg-card cursor-pointer rounded-lg border p-4 transition-all ${selectedDashboard?.id === dashboard.id ? "ring-primary ring-2" : "hover:bg-muted/50"}`,
+							role: "button",
+							tabIndex: 0,
+							onKeyDown: (e) => {
+								if (e.key === "Enter" || e.key === " ") selectDashboard(dashboard);
+							},
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "mb-2 flex items-center justify-between",
+									children: [/* @__PURE__ */ jsx("h3", {
+										className: "font-medium",
+										children: dashboard.name
+									}), /* @__PURE__ */ jsx("span", {
+										className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[dashboard.status] ?? ""}`,
+										children: dashboard.status
+									})]
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground mb-3 text-sm",
+									children: dashboard.description
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "text-muted-foreground flex items-center justify-between text-xs",
+									children: [/* @__PURE__ */ jsxs("span", { children: ["/", dashboard.slug] }), dashboard.isPublic && /* @__PURE__ */ jsx("span", {
+										className: "text-green-600 dark:text-green-400",
+										children: "🌐 Public"
+									})]
+								})
+							]
+						}, dashboard.id)), dashboards.length === 0 && /* @__PURE__ */ jsx("div", {
+							className: "text-muted-foreground col-span-full flex h-64 items-center justify-center",
+							children: "No dashboards created yet"
+						})]
+					}), selectedDashboard && widgets.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h3", {
+						className: "mb-4 text-lg font-semibold",
+						children: [
+							"Widgets in \"",
+							selectedDashboard.name,
+							"\""
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+						children: widgets.map((widget) => /* @__PURE__ */ jsxs("div", {
+							className: "border-border bg-card rounded-lg border p-4",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "mb-2 flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-xl",
+										children: WIDGET_ICONS[widget.type] ?? "📊"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "font-medium",
+										children: widget.name
+									})]
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "text-muted-foreground text-sm",
+									children: widget.type.replace(/_/g, " ")
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "text-muted-foreground mt-2 text-xs",
+									children: [
+										"Position: (",
+										widget.gridX,
+										", ",
+										widget.gridY,
+										") •",
+										" ",
+										widget.gridWidth,
+										"x",
+										widget.gridHeight
+									]
+								})
+							]
+						}, widget.id))
+					})] })]
+				}), activeTab === "queries" && /* @__PURE__ */ jsx("div", {
+					className: "border-border rounded-lg border",
+					children: /* @__PURE__ */ jsxs("table", {
+						className: "w-full",
+						children: [/* @__PURE__ */ jsx("thead", {
+							className: "border-border bg-muted/30 border-b",
+							children: /* @__PURE__ */ jsxs("tr", { children: [
+								/* @__PURE__ */ jsx("th", {
+									className: "px-4 py-3 text-left text-sm font-medium",
+									children: "Query"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "px-4 py-3 text-left text-sm font-medium",
+									children: "Type"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "px-4 py-3 text-left text-sm font-medium",
+									children: "Cache TTL"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "px-4 py-3 text-left text-sm font-medium",
+									children: "Shared"
+								})
+							] })
+						}), /* @__PURE__ */ jsxs("tbody", {
+							className: "divide-border divide-y",
+							children: [queries.map((query) => /* @__PURE__ */ jsxs("tr", {
+								className: "hover:bg-muted/50",
+								children: [
+									/* @__PURE__ */ jsxs("td", {
+										className: "px-4 py-3",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "font-medium",
+											children: query.name
+										}), /* @__PURE__ */ jsx("div", {
+											className: "text-muted-foreground text-sm",
+											children: query.description
+										})]
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-3",
+										children: /* @__PURE__ */ jsx("span", {
+											className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${QUERY_TYPE_COLORS[query.type] ?? ""}`,
+											children: query.type
+										})
+									}),
+									/* @__PURE__ */ jsxs("td", {
+										className: "text-muted-foreground px-4 py-3 text-sm",
+										children: [query.cacheTtlSeconds, "s"]
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-3",
+										children: query.isShared ? /* @__PURE__ */ jsx("span", {
+											className: "text-green-600 dark:text-green-400",
+											children: "✓"
+										}) : /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground",
+											children: "—"
+										})
+									})
+								]
+							}, query.id)), queries.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+								colSpan: 4,
+								className: "text-muted-foreground px-4 py-8 text-center",
+								children: "No queries saved"
+							}) })]
+						})]
+					})
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { AnalyticsDashboard };
+//# sourceMappingURL=AnalyticsDashboard.js.map

package/dist/ui/AnalyticsDashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsDashboard.js","names":[],"sources":["../../src/ui/AnalyticsDashboard.tsx"],"sourcesContent":["'use client';\n\n/**\n * Analytics Dashboard\n *\n * Interactive dashboard for the analytics-dashboard template.\n * Displays dashboards, widgets, and queries.\n */\nimport { useState } from 'react';\nimport {\n  Button,\n  ErrorState,\n  LoaderBlock,\n  StatCard,\n  StatCardGroup,\n} from '@contractspec/lib.design-system';\nimport { useAnalyticsData } from './hooks/useAnalyticsData';\n\ntype Tab = 'dashboards' | 'queries';\n\nconst STATUS_COLORS: Record<string, string> = {\n  PUBLISHED:\n    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',\n  DRAFT: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400',\n  ARCHIVED:\n    'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',\n};\n\nconst WIDGET_ICONS: Record<string, string> = {\n  LINE_CHART: '📈',\n  BAR_CHART: '📊',\n  PIE_CHART: '🥧',\n  AREA_CHART: '📉',\n  SCATTER_PLOT: '⚬',\n  METRIC: '🔢',\n  TABLE: '📋',\n  HEATMAP: '🗺️',\n  FUNNEL: '⏬',\n  MAP: '🌍',\n  TEXT: '📝',\n  EMBED: '🔗',\n};\n\nconst QUERY_TYPE_COLORS: Record<string, string> = {\n  SQL: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',\n  METRIC:\n    'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',\n  AGGREGATION:\n    'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400',\n  CUSTOM: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400',\n};\n\nexport function AnalyticsDashboard() {\n  const [activeTab, setActiveTab] = useState<Tab>('dashboards');\n  const {\n    dashboards,\n    queries,\n    selectedDashboard,\n    widgets,\n    loading,\n    error,\n    stats,\n    refetch,\n    selectDashboard,\n  } = useAnalyticsData();\n\n  const tabs: { id: Tab; label: string; icon: string }[] = [\n    { id: 'dashboards', label: 'Dashboards', icon: '📊' },\n    { id: 'queries', label: 'Queries', icon: '🔍' },\n  ];\n\n  if (loading) {\n    return <LoaderBlock label=\"Loading Analytics...\" />;\n  }\n\n  if (error) {\n    return (\n      <ErrorState\n        title=\"Failed to load Analytics\"\n        description={error.message}\n        onRetry={refetch}\n        retryLabel=\"Retry\"\n      />\n    );\n  }\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"text-2xl font-bold\">Analytics Dashboard</h2>\n        <Button onClick={() => alert('Create dashboard modal')}>\n          <span className=\"mr-2\">+</span> New Dashboard\n        </Button>\n      </div>\n\n      {/* Stats Row */}\n      <StatCardGroup>\n        <StatCard\n          label=\"Dashboards\"\n          value={stats.totalDashboards}\n          hint={`${stats.publishedDashboards} published`}\n        />\n        <StatCard\n          label=\"Queries\"\n          value={stats.totalQueries}\n          hint={`${stats.sharedQueries} shared`}\n        />\n        <StatCard\n          label=\"Widgets\"\n          value={widgets.length}\n          hint=\"on current dashboard\"\n        />\n      </StatCardGroup>\n\n      {/* Navigation Tabs */}\n      <nav className=\"bg-muted flex gap-1 rounded-lg p-1\" role=\"tablist\">\n        {tabs.map((tab) => (\n          <Button\n            key={tab.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={activeTab === tab.id}\n            onClick={() => setActiveTab(tab.id)}\n            className={`flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${\n              activeTab === tab.id\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n          >\n            <span>{tab.icon}</span>\n            {tab.label}\n          </Button>\n        ))}\n      </nav>\n\n      {/* Tab Content */}\n      <div className=\"min-h-[400px]\" role=\"tabpanel\">\n        {activeTab === 'dashboards' && (\n          <div className=\"space-y-6\">\n            {/* Dashboard List */}\n            <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n              {dashboards.map((dashboard) => (\n                <div\n                  key={dashboard.id}\n                  onClick={() => selectDashboard(dashboard)}\n                  className={`border-border bg-card cursor-pointer rounded-lg border p-4 transition-all ${\n                    selectedDashboard?.id === dashboard.id\n                      ? 'ring-primary ring-2'\n                      : 'hover:bg-muted/50'\n                  }`}\n                  role=\"button\"\n                  tabIndex={0}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ')\n                      selectDashboard(dashboard);\n                  }}\n                >\n                  <div className=\"mb-2 flex items-center justify-between\">\n                    <h3 className=\"font-medium\">{dashboard.name}</h3>\n                    <span\n                      className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[dashboard.status] ?? ''}`}\n                    >\n                      {dashboard.status}\n                    </span>\n                  </div>\n                  <p className=\"text-muted-foreground mb-3 text-sm\">\n                    {dashboard.description}\n                  </p>\n                  <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n                    <span>/{dashboard.slug}</span>\n                    {dashboard.isPublic && (\n                      <span className=\"text-green-600 dark:text-green-400\">\n                        🌐 Public\n                      </span>\n                    )}\n                  </div>\n                </div>\n              ))}\n              {dashboards.length === 0 && (\n                <div className=\"text-muted-foreground col-span-full flex h-64 items-center justify-center\">\n                  No dashboards created yet\n                </div>\n              )}\n            </div>\n\n            {/* Widget Grid for Selected Dashboard */}\n            {selectedDashboard && widgets.length > 0 && (\n              <div>\n                <h3 className=\"mb-4 text-lg font-semibold\">\n                  Widgets in \"{selectedDashboard.name}\"\n                </h3>\n                <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n                  {widgets.map((widget) => (\n                    <div\n                      key={widget.id}\n                      className=\"border-border bg-card rounded-lg border p-4\"\n                    >\n                      <div className=\"mb-2 flex items-center gap-2\">\n                        <span className=\"text-xl\">\n                          {WIDGET_ICONS[widget.type] ?? '📊'}\n                        </span>\n                        <span className=\"font-medium\">{widget.name}</span>\n                      </div>\n                      <div className=\"text-muted-foreground text-sm\">\n                        {widget.type.replace(/_/g, ' ')}\n                      </div>\n                      <div className=\"text-muted-foreground mt-2 text-xs\">\n                        Position: ({widget.gridX}, {widget.gridY}) •{' '}\n                        {widget.gridWidth}x{widget.gridHeight}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n\n        {activeTab === 'queries' && (\n          <div className=\"border-border rounded-lg border\">\n            <table className=\"w-full\">\n              <thead className=\"border-border bg-muted/30 border-b\">\n                <tr>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Query\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Type\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Cache TTL\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Shared\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-border divide-y\">\n                {queries.map((query) => (\n                  <tr key={query.id} className=\"hover:bg-muted/50\">\n                    <td className=\"px-4 py-3\">\n                      <div className=\"font-medium\">{query.name}</div>\n                      <div className=\"text-muted-foreground text-sm\">\n                        {query.description}\n                      </div>\n                    </td>\n                    <td className=\"px-4 py-3\">\n                      <span\n                        className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${QUERY_TYPE_COLORS[query.type] ?? ''}`}\n                      >\n                        {query.type}\n                      </span>\n                    </td>\n                    <td className=\"text-muted-foreground px-4 py-3 text-sm\">\n                      {query.cacheTtlSeconds}s\n                    </td>\n                    <td className=\"px-4 py-3\">\n                      {query.isShared ? (\n                        <span className=\"text-green-600 dark:text-green-400\">\n                          ✓\n                        </span>\n                      ) : (\n                        <span className=\"text-muted-foreground\">—</span>\n                      )}\n                    </td>\n                  </tr>\n                ))}\n                {queries.length === 0 && (\n                  <tr>\n                    <td\n                      colSpan={4}\n                      className=\"text-muted-foreground px-4 py-8 text-center\"\n                    >\n                      No queries saved\n                    </td>\n                  </tr>\n                )}\n              </tbody>\n            </table>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/hooks/index.d.ts

@@ -0,0 +1,2 @@
+import { AnalyticsStats, useAnalyticsData } from "./useAnalyticsData.js";
+export { type AnalyticsStats, useAnalyticsData };

package/dist/ui/hooks/index.js

@@ -0,0 +1,5 @@
+'use client';
+
+import { useAnalyticsData } from "./useAnalyticsData.js";
+
+export { useAnalyticsData };

package/dist/ui/hooks/useAnalyticsData.d.ts

@@ -0,0 +1,23 @@
+import { Dashboard, Query, Widget } from "../../handlers/analytics.handlers.js";
+
+//#region src/ui/hooks/useAnalyticsData.d.ts
+interface AnalyticsStats {
+  totalDashboards: number;
+  publishedDashboards: number;
+  totalQueries: number;
+  sharedQueries: number;
+}
+declare function useAnalyticsData(projectId?: string): {
+  dashboards: Dashboard[];
+  queries: Query[];
+  selectedDashboard: Dashboard | null;
+  widgets: Widget[];
+  loading: boolean;
+  error: Error | null;
+  stats: AnalyticsStats;
+  refetch: () => Promise<void>;
+  selectDashboard: (dashboard: Dashboard) => Promise<void>;
+};
+//#endregion
+export { AnalyticsStats, useAnalyticsData };
+//# sourceMappingURL=useAnalyticsData.d.ts.map

package/dist/ui/hooks/useAnalyticsData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnalyticsData.d.ts","names":[],"sources":["../../../src/ui/hooks/useAnalyticsData.ts"],"sourcesContent":[],"mappings":";;;UAWiB,cAAA;;EAAA,mBAAc,EAAA,MAAA;EAOf,YAAA,EAAA,MAAgB;;;iBAAhB,gBAAA;;;;;EAgDM,OAAA,EAAA,OAAA;EAAS,KAAA,OAAA,GAAA,IAAA;EAAA,KAAA,gBAAA;;+BAAT,cAAS"}

package/dist/ui/hooks/useAnalyticsData.js

@@ -0,0 +1,73 @@
+'use client';
+
+import { useCallback, useEffect, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/ui/hooks/useAnalyticsData.ts
+function useAnalyticsData(projectId = "local-project") {
+	const { handlers } = useTemplateRuntime();
+	const analytics = handlers.analytics;
+	const [dashboards, setDashboards] = useState([]);
+	const [queries, setQueries] = useState([]);
+	const [selectedDashboard, setSelectedDashboard] = useState(null);
+	const [widgets, setWidgets] = useState([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const fetchData = useCallback(async () => {
+		try {
+			setLoading(true);
+			setError(null);
+			const [dashResult, queryResult] = await Promise.all([analytics.listDashboards({
+				projectId,
+				limit: 100
+			}), analytics.listQueries({
+				projectId,
+				limit: 100
+			})]);
+			setDashboards(dashResult.dashboards);
+			setQueries(queryResult.queries);
+			if (dashResult.dashboards.length > 0 && !selectedDashboard) {
+				const first = dashResult.dashboards[0];
+				if (first) {
+					setSelectedDashboard(first);
+					setWidgets(await analytics.getWidgets(first.id));
+				}
+			}
+		} catch (err) {
+			setError(err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to load analytics"));
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		analytics,
+		projectId,
+		selectedDashboard
+	]);
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+	const selectDashboard = useCallback(async (dashboard) => {
+		setSelectedDashboard(dashboard);
+		setWidgets(await analytics.getWidgets(dashboard.id));
+	}, [analytics]);
+	return {
+		dashboards,
+		queries,
+		selectedDashboard,
+		widgets,
+		loading,
+		error,
+		stats: {
+			totalDashboards: dashboards.length,
+			publishedDashboards: dashboards.filter((d) => d.status === "PUBLISHED").length,
+			totalQueries: queries.length,
+			sharedQueries: queries.filter((q) => q.isShared).length
+		},
+		refetch: fetchData,
+		selectDashboard
+	};
+}
+
+//#endregion
+export { useAnalyticsData };
+//# sourceMappingURL=useAnalyticsData.js.map

package/dist/ui/hooks/useAnalyticsData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnalyticsData.js","names":[],"sources":["../../../src/ui/hooks/useAnalyticsData.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useState } from 'react';\nimport type {\n  AnalyticsHandlers,\n  Dashboard,\n  Query,\n  Widget,\n} from '../../handlers/analytics.handlers';\nimport { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';\n\nexport interface AnalyticsStats {\n  totalDashboards: number;\n  publishedDashboards: number;\n  totalQueries: number;\n  sharedQueries: number;\n}\n\nexport function useAnalyticsData(projectId = 'local-project') {\n  const { handlers } = useTemplateRuntime<{ analytics: AnalyticsHandlers }>();\n  const analytics = handlers.analytics;\n  const [dashboards, setDashboards] = useState<Dashboard[]>([]);\n  const [queries, setQueries] = useState<Query[]>([]);\n  const [selectedDashboard, setSelectedDashboard] = useState<Dashboard | null>(\n    null\n  );\n  const [widgets, setWidgets] = useState<Widget[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const fetchData = useCallback(async () => {\n    try {\n      setLoading(true);\n      setError(null);\n\n      const [dashResult, queryResult] = await Promise.all([\n        analytics.listDashboards({ projectId, limit: 100 }),\n        analytics.listQueries({ projectId, limit: 100 }),\n      ]);\n\n      setDashboards(dashResult.dashboards);\n      setQueries(queryResult.queries);\n\n      // Select first dashboard if available\n      if (dashResult.dashboards.length > 0 && !selectedDashboard) {\n        const first = dashResult.dashboards[0];\n        if (first) {\n          setSelectedDashboard(first);\n          const dashboardWidgets = await analytics.getWidgets(first.id);\n          setWidgets(dashboardWidgets);\n        }\n      }\n    } catch (err) {\n      setError(\n        err instanceof Error ? err : new Error('Failed to load analytics')\n      );\n    } finally {\n      setLoading(false);\n    }\n  }, [analytics, projectId, selectedDashboard]);\n\n  useEffect(() => {\n    fetchData();\n  }, [fetchData]);\n\n  const selectDashboard = useCallback(\n    async (dashboard: Dashboard) => {\n      setSelectedDashboard(dashboard);\n      const dashboardWidgets = await analytics.getWidgets(dashboard.id);\n      setWidgets(dashboardWidgets);\n    },\n    [analytics]\n  );\n\n  const stats: AnalyticsStats = {\n    totalDashboards: dashboards.length,\n    publishedDashboards: dashboards.filter((d) => d.status === 'PUBLISHED')\n      .length,\n    totalQueries: queries.length,\n    sharedQueries: queries.filter((q) => q.isShared).length,\n  };\n\n  return {\n    dashboards,\n    queries,\n    selectedDashboard,\n    widgets,\n    loading,\n    error,\n    stats,\n    refetch: fetchData,\n    selectDashboard,\n  };\n}\n"],"mappings":";;;;;;AAkBA,SAAgB,iBAAiB,YAAY,iBAAiB;CAC5D,MAAM,EAAE,aAAa,oBAAsD;CAC3E,MAAM,YAAY,SAAS;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAAsB,EAAE,CAAC;CAC7D,MAAM,CAAC,SAAS,cAAc,SAAkB,EAAE,CAAC;CACnD,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,KACD;CACD,MAAM,CAAC,SAAS,cAAc,SAAmB,EAAE,CAAC;CACpD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CAEtD,MAAM,YAAY,YAAY,YAAY;AACxC,MAAI;AACF,cAAW,KAAK;AAChB,YAAS,KAAK;GAEd,MAAM,CAAC,YAAY,eAAe,MAAM,QAAQ,IAAI,CAClD,UAAU,eAAe;IAAE;IAAW,OAAO;IAAK,CAAC,EACnD,UAAU,YAAY;IAAE;IAAW,OAAO;IAAK,CAAC,CACjD,CAAC;AAEF,iBAAc,WAAW,WAAW;AACpC,cAAW,YAAY,QAAQ;AAG/B,OAAI,WAAW,WAAW,SAAS,KAAK,CAAC,mBAAmB;IAC1D,MAAM,QAAQ,WAAW,WAAW;AACpC,QAAI,OAAO;AACT,0BAAqB,MAAM;AAE3B,gBADyB,MAAM,UAAU,WAAW,MAAM,GAAG,CACjC;;;WAGzB,KAAK;AACZ,YACE,eAAe,QAAQ,sBAAM,IAAI,MAAM,2BAA2B,CACnE;YACO;AACR,cAAW,MAAM;;IAElB;EAAC;EAAW;EAAW;EAAkB,CAAC;AAE7C,iBAAgB;AACd,aAAW;IACV,CAAC,UAAU,CAAC;CAEf,MAAM,kBAAkB,YACtB,OAAO,cAAyB;AAC9B,uBAAqB,UAAU;AAE/B,aADyB,MAAM,UAAU,WAAW,UAAU,GAAG,CACrC;IAE9B,CAAC,UAAU,CACZ;AAUD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,OAf4B;GAC5B,iBAAiB,WAAW;GAC5B,qBAAqB,WAAW,QAAQ,MAAM,EAAE,WAAW,YAAY,CACpE;GACH,cAAc,QAAQ;GACtB,eAAe,QAAQ,QAAQ,MAAM,EAAE,SAAS,CAAC;GAClD;EAUC,SAAS;EACT;EACD"}

package/dist/ui/index.d.ts

@@ -0,0 +1,6 @@
+import { analyticsDashboardMarkdownRenderer, dashboardListMarkdownRenderer, queryBuilderMarkdownRenderer } from "./renderers/analytics.markdown.js";
+import "./renderers/index.js";
+import { AnalyticsDashboard } from "./AnalyticsDashboard.js";
+import { AnalyticsStats, useAnalyticsData } from "./hooks/useAnalyticsData.js";
+import "./hooks/index.js";
+export { AnalyticsDashboard, AnalyticsStats, analyticsDashboardMarkdownRenderer, dashboardListMarkdownRenderer, queryBuilderMarkdownRenderer, useAnalyticsData };

package/dist/ui/index.js

@@ -0,0 +1,6 @@
+import { analyticsDashboardMarkdownRenderer, dashboardListMarkdownRenderer, queryBuilderMarkdownRenderer } from "./renderers/analytics.markdown.js";
+import { useAnalyticsData } from "./hooks/useAnalyticsData.js";
+import { AnalyticsDashboard } from "./AnalyticsDashboard.js";
+import "./hooks/index.js";
+
+export { AnalyticsDashboard, analyticsDashboardMarkdownRenderer, dashboardListMarkdownRenderer, queryBuilderMarkdownRenderer, useAnalyticsData };

package/dist/ui/renderers/analytics.markdown.d.ts

@@ -0,0 +1,28 @@
+import { PresentationRenderer } from "@contractspec/lib.contracts";
+
+//#region src/ui/renderers/analytics.markdown.d.ts
+
+/**
+ * Markdown renderer for Analytics Dashboard Overview
+ */
+declare const analyticsDashboardMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}>;
+/**
+ * Markdown renderer for Dashboard List
+ */
+declare const dashboardListMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}>;
+/**
+ * Markdown renderer for Query Builder
+ */
+declare const queryBuilderMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}>;
+//#endregion
+export { analyticsDashboardMarkdownRenderer, dashboardListMarkdownRenderer, queryBuilderMarkdownRenderer };
+//# sourceMappingURL=analytics.markdown.d.ts.map

package/dist/ui/renderers/analytics.markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics.markdown.d.ts","names":[],"sources":["../../../src/ui/renderers/analytics.markdown.ts"],"sourcesContent":[],"mappings":";;;;AAuOA;AAmDA;;cA3Ia,oCAAoC;;;;;;;cAwFpC,+BAA+B;;;;;;;cAmD/B,8BAA8B"}