@contractspec/example.analytics-dashboard 1.46.0 → 1.47.0

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"}

package/dist/ui/renderers/analytics.markdown.js

@@ -0,0 +1,264 @@
+//#region src/ui/renderers/analytics.markdown.ts
+const mockDashboards = [
+	{
+		id: "dash-1",
+		name: "Sales Overview",
+		slug: "sales-overview",
+		status: "PUBLISHED",
+		widgetCount: 8,
+		viewCount: 1250,
+		lastViewedAt: "2024-01-16T12:00:00Z"
+	},
+	{
+		id: "dash-2",
+		name: "User Engagement",
+		slug: "user-engagement",
+		status: "PUBLISHED",
+		widgetCount: 6,
+		viewCount: 890,
+		lastViewedAt: "2024-01-16T10:00:00Z"
+	},
+	{
+		id: "dash-3",
+		name: "Product Analytics",
+		slug: "product-analytics",
+		status: "PUBLISHED",
+		widgetCount: 10,
+		viewCount: 560,
+		lastViewedAt: "2024-01-15T14:00:00Z"
+	},
+	{
+		id: "dash-4",
+		name: "Finance Report",
+		slug: "finance-report",
+		status: "DRAFT",
+		widgetCount: 4,
+		viewCount: 0,
+		lastViewedAt: null
+	}
+];
+const mockWidgets = [
+	{
+		id: "w-1",
+		dashboardId: "dash-1",
+		name: "Total Revenue",
+		type: "METRIC",
+		value: 125e3,
+		change: 12.5
+	},
+	{
+		id: "w-2",
+		dashboardId: "dash-1",
+		name: "Active Users",
+		type: "METRIC",
+		value: 4500,
+		change: 8.2
+	},
+	{
+		id: "w-3",
+		dashboardId: "dash-1",
+		name: "Revenue Trend",
+		type: "LINE_CHART",
+		dataPoints: 30
+	},
+	{
+		id: "w-4",
+		dashboardId: "dash-1",
+		name: "Top Products",
+		type: "BAR_CHART",
+		dataPoints: 10
+	},
+	{
+		id: "w-5",
+		dashboardId: "dash-2",
+		name: "Daily Active Users",
+		type: "LINE_CHART",
+		dataPoints: 30
+	},
+	{
+		id: "w-6",
+		dashboardId: "dash-2",
+		name: "Session Duration",
+		type: "METRIC",
+		value: 245,
+		change: -3.1
+	}
+];
+const mockQueries = [
+	{
+		id: "q-1",
+		name: "Monthly Revenue",
+		type: "AGGREGATION",
+		isShared: true,
+		executionCount: 1500
+	},
+	{
+		id: "q-2",
+		name: "User Growth",
+		type: "METRIC",
+		isShared: true,
+		executionCount: 890
+	},
+	{
+		id: "q-3",
+		name: "Product Sales",
+		type: "SQL",
+		isShared: false,
+		executionCount: 340
+	},
+	{
+		id: "q-4",
+		name: "Conversion Funnel",
+		type: "AGGREGATION",
+		isShared: true,
+		executionCount: 450
+	}
+];
+function formatNumber(value) {
+	if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+	if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
+	return value.toString();
+}
+function formatChange(change) {
+	return `${change >= 0 ? "📈" : "📉"} ${change >= 0 ? "+" : ""}${change.toFixed(1)}%`;
+}
+/**
+* Markdown renderer for Analytics Dashboard Overview
+*/
+const analyticsDashboardMarkdownRenderer = {
+	target: "markdown",
+	render: async (desc) => {
+		if (desc.source.type !== "component" || desc.source.componentKey !== "AnalyticsDashboard") throw new Error("analyticsDashboardMarkdownRenderer: not AnalyticsDashboard");
+		const dashboards = mockDashboards;
+		const widgets = mockWidgets;
+		const queries = mockQueries;
+		const dashboard = dashboards[0];
+		if (!dashboard) return {
+			mimeType: "text/markdown",
+			body: "# No Dashboards\n\nNo dashboards available."
+		};
+		const dashboardWidgets = widgets.filter((w) => w.dashboardId === dashboard.id);
+		const publishedDashboards = dashboards.filter((d) => d.status === "PUBLISHED");
+		const totalViews = dashboards.reduce((sum, d) => sum + d.viewCount, 0);
+		const sharedQueries = queries.filter((q) => q.isShared);
+		const lines = [
+			`# ${dashboard.name}`,
+			"",
+			"> Analytics dashboard overview",
+			"",
+			"## Key Metrics",
+			""
+		];
+		const metricWidgets = dashboardWidgets.filter((w) => w.type === "METRIC");
+		for (const widget of metricWidgets) {
+			const w = widget;
+			lines.push(`### ${w.name}`);
+			lines.push(`**${formatNumber(w.value)}** ${formatChange(w.change)}`);
+			lines.push("");
+		}
+		lines.push("## Visualizations");
+		lines.push("");
+		const chartWidgets = dashboardWidgets.filter((w) => w.type !== "METRIC");
+		for (const widget of chartWidgets) {
+			const w = widget;
+			lines.push(`- **${w.name}** (${w.type.replace("_", " ")}) - ${w.dataPoints} data points`);
+		}
+		lines.push("");
+		lines.push("## Dashboard Stats");
+		lines.push("");
+		lines.push("| Metric | Value |");
+		lines.push("|--------|-------|");
+		lines.push(`| Total Dashboards | ${dashboards.length} |`);
+		lines.push(`| Published | ${publishedDashboards.length} |`);
+		lines.push(`| Total Views | ${totalViews.toLocaleString()} |`);
+		lines.push(`| Shared Queries | ${sharedQueries.length} |`);
+		return {
+			mimeType: "text/markdown",
+			body: lines.join("\n")
+		};
+	}
+};
+/**
+* Markdown renderer for Dashboard List
+*/
+const dashboardListMarkdownRenderer = {
+	target: "markdown",
+	render: async (desc) => {
+		if (desc.source.type !== "component" || desc.source.componentKey !== "DashboardList") throw new Error("dashboardListMarkdownRenderer: not DashboardList");
+		const dashboards = mockDashboards;
+		const lines = [
+			"# Dashboards",
+			"",
+			"> Browse and manage analytics dashboards",
+			"",
+			"| Dashboard | Widgets | Views | Status | Last Viewed |",
+			"|-----------|---------|-------|--------|-------------|"
+		];
+		for (const dashboard of dashboards) {
+			const lastViewed = dashboard.lastViewedAt ? new Date(dashboard.lastViewedAt).toLocaleDateString() : "Never";
+			const statusIcon = dashboard.status === "PUBLISHED" ? "🟢" : "⚫";
+			lines.push(`| [${dashboard.name}](/dashboards/${dashboard.slug}) | ${dashboard.widgetCount} | ${dashboard.viewCount.toLocaleString()} | ${statusIcon} ${dashboard.status} | ${lastViewed} |`);
+		}
+		lines.push("");
+		lines.push("## Quick Actions");
+		lines.push("");
+		lines.push("- **Create Dashboard** - Start with a blank canvas");
+		lines.push("- **Import Template** - Use a pre-built template");
+		lines.push("- **Clone Dashboard** - Duplicate an existing dashboard");
+		return {
+			mimeType: "text/markdown",
+			body: lines.join("\n")
+		};
+	}
+};
+/**
+* Markdown renderer for Query Builder
+*/
+const queryBuilderMarkdownRenderer = {
+	target: "markdown",
+	render: async (desc) => {
+		if (desc.source.type !== "component" || desc.source.componentKey !== "QueryBuilder") throw new Error("queryBuilderMarkdownRenderer: not QueryBuilder");
+		const queries = mockQueries;
+		const lines = [
+			"# Query Builder",
+			"",
+			"> Create and manage data queries",
+			"",
+			"## Saved Queries",
+			"",
+			"| Query | Type | Shared | Executions |",
+			"|-------|------|--------|------------|"
+		];
+		for (const query of queries) {
+			const sharedIcon = query.isShared ? "🌐" : "🔒";
+			lines.push(`| ${query.name} | ${query.type} | ${sharedIcon} | ${query.executionCount.toLocaleString()} |`);
+		}
+		lines.push("");
+		lines.push("## Query Types");
+		lines.push("");
+		lines.push("### METRIC");
+		lines.push("Query usage metrics from the metering system.");
+		lines.push("");
+		lines.push("### AGGREGATION");
+		lines.push("Build aggregations with measures and dimensions without writing SQL.");
+		lines.push("");
+		lines.push("### SQL");
+		lines.push("Write custom SQL queries for advanced analysis.");
+		lines.push("");
+		lines.push("## Features");
+		lines.push("");
+		lines.push("- Visual query builder");
+		lines.push("- Auto-complete for fields and functions");
+		lines.push("- Query validation and optimization");
+		lines.push("- Result caching");
+		lines.push("- Query sharing and collaboration");
+		return {
+			mimeType: "text/markdown",
+			body: lines.join("\n")
+		};
+	}
+};
+
+//#endregion
+export { analyticsDashboardMarkdownRenderer, dashboardListMarkdownRenderer, queryBuilderMarkdownRenderer };
+//# sourceMappingURL=analytics.markdown.js.map

package/dist/ui/renderers/analytics.markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics.markdown.js","names":[],"sources":["../../../src/ui/renderers/analytics.markdown.ts"],"sourcesContent":["/**\n * Markdown renderers for Analytics Dashboard presentations\n */\nimport type { PresentationRenderer } from '@contractspec/lib.contracts';\n\n// Mock data for analytics rendering\nconst mockDashboards = [\n  {\n    id: 'dash-1',\n    name: 'Sales Overview',\n    slug: 'sales-overview',\n    status: 'PUBLISHED',\n    widgetCount: 8,\n    viewCount: 1250,\n    lastViewedAt: '2024-01-16T12:00:00Z',\n  },\n  {\n    id: 'dash-2',\n    name: 'User Engagement',\n    slug: 'user-engagement',\n    status: 'PUBLISHED',\n    widgetCount: 6,\n    viewCount: 890,\n    lastViewedAt: '2024-01-16T10:00:00Z',\n  },\n  {\n    id: 'dash-3',\n    name: 'Product Analytics',\n    slug: 'product-analytics',\n    status: 'PUBLISHED',\n    widgetCount: 10,\n    viewCount: 560,\n    lastViewedAt: '2024-01-15T14:00:00Z',\n  },\n  {\n    id: 'dash-4',\n    name: 'Finance Report',\n    slug: 'finance-report',\n    status: 'DRAFT',\n    widgetCount: 4,\n    viewCount: 0,\n    lastViewedAt: null,\n  },\n];\n\nconst mockWidgets = [\n  {\n    id: 'w-1',\n    dashboardId: 'dash-1',\n    name: 'Total Revenue',\n    type: 'METRIC',\n    value: 125000,\n    change: 12.5,\n  },\n  {\n    id: 'w-2',\n    dashboardId: 'dash-1',\n    name: 'Active Users',\n    type: 'METRIC',\n    value: 4500,\n    change: 8.2,\n  },\n  {\n    id: 'w-3',\n    dashboardId: 'dash-1',\n    name: 'Revenue Trend',\n    type: 'LINE_CHART',\n    dataPoints: 30,\n  },\n  {\n    id: 'w-4',\n    dashboardId: 'dash-1',\n    name: 'Top Products',\n    type: 'BAR_CHART',\n    dataPoints: 10,\n  },\n  {\n    id: 'w-5',\n    dashboardId: 'dash-2',\n    name: 'Daily Active Users',\n    type: 'LINE_CHART',\n    dataPoints: 30,\n  },\n  {\n    id: 'w-6',\n    dashboardId: 'dash-2',\n    name: 'Session Duration',\n    type: 'METRIC',\n    value: 245,\n    change: -3.1,\n  },\n];\n\nconst mockQueries = [\n  {\n    id: 'q-1',\n    name: 'Monthly Revenue',\n    type: 'AGGREGATION',\n    isShared: true,\n    executionCount: 1500,\n  },\n  {\n    id: 'q-2',\n    name: 'User Growth',\n    type: 'METRIC',\n    isShared: true,\n    executionCount: 890,\n  },\n  {\n    id: 'q-3',\n    name: 'Product Sales',\n    type: 'SQL',\n    isShared: false,\n    executionCount: 340,\n  },\n  {\n    id: 'q-4',\n    name: 'Conversion Funnel',\n    type: 'AGGREGATION',\n    isShared: true,\n    executionCount: 450,\n  },\n];\n\nfunction formatNumber(value: number): string {\n  if (value >= 1000000) {\n    return `${(value / 1000000).toFixed(1)}M`;\n  }\n  if (value >= 1000) {\n    return `${(value / 1000).toFixed(1)}K`;\n  }\n  return value.toString();\n}\n\nfunction formatChange(change: number): string {\n  const icon = change >= 0 ? '📈' : '📉';\n  const sign = change >= 0 ? '+' : '';\n  return `${icon} ${sign}${change.toFixed(1)}%`;\n}\n\n/**\n * Markdown renderer for Analytics Dashboard Overview\n */\nexport const analyticsDashboardMarkdownRenderer: PresentationRenderer<{\n  mimeType: string;\n  body: string;\n}> = {\n  target: 'markdown',\n  render: async (desc) => {\n    if (\n      desc.source.type !== 'component' ||\n      desc.source.componentKey !== 'AnalyticsDashboard'\n    ) {\n      throw new Error(\n        'analyticsDashboardMarkdownRenderer: not AnalyticsDashboard'\n      );\n    }\n\n    const dashboards = mockDashboards;\n    const widgets = mockWidgets;\n    const queries = mockQueries;\n\n    // Get the first dashboard for detailed view\n    const dashboard = dashboards[0];\n    if (!dashboard) {\n      return {\n        mimeType: 'text/markdown',\n        body: '# No Dashboards\\n\\nNo dashboards available.',\n      };\n    }\n    const dashboardWidgets = widgets.filter(\n      (w) => w.dashboardId === dashboard.id\n    );\n\n    // Calculate stats\n    const publishedDashboards = dashboards.filter(\n      (d) => d.status === 'PUBLISHED'\n    );\n    const totalViews = dashboards.reduce((sum, d) => sum + d.viewCount, 0);\n    const sharedQueries = queries.filter((q) => q.isShared);\n\n    const lines: string[] = [\n      `# ${dashboard.name}`,\n      '',\n      '> Analytics dashboard overview',\n      '',\n      '## Key Metrics',\n      '',\n    ];\n\n    // Show metric widgets\n    const metricWidgets = dashboardWidgets.filter((w) => w.type === 'METRIC');\n    for (const widget of metricWidgets) {\n      const w = widget as { name: string; value: number; change: number };\n      lines.push(`### ${w.name}`);\n      lines.push(`**${formatNumber(w.value)}** ${formatChange(w.change)}`);\n      lines.push('');\n    }\n\n    lines.push('## Visualizations');\n    lines.push('');\n\n    // List chart widgets\n    const chartWidgets = dashboardWidgets.filter((w) => w.type !== 'METRIC');\n    for (const widget of chartWidgets) {\n      const w = widget as { name: string; type: string; dataPoints: number };\n      lines.push(\n        `- **${w.name}** (${w.type.replace('_', ' ')}) - ${w.dataPoints} data points`\n      );\n    }\n\n    lines.push('');\n    lines.push('## Dashboard Stats');\n    lines.push('');\n    lines.push('| Metric | Value |');\n    lines.push('|--------|-------|');\n    lines.push(`| Total Dashboards | ${dashboards.length} |`);\n    lines.push(`| Published | ${publishedDashboards.length} |`);\n    lines.push(`| Total Views | ${totalViews.toLocaleString()} |`);\n    lines.push(`| Shared Queries | ${sharedQueries.length} |`);\n\n    return {\n      mimeType: 'text/markdown',\n      body: lines.join('\\n'),\n    };\n  },\n};\n\n/**\n * Markdown renderer for Dashboard List\n */\nexport const dashboardListMarkdownRenderer: PresentationRenderer<{\n  mimeType: string;\n  body: string;\n}> = {\n  target: 'markdown',\n  render: async (desc) => {\n    if (\n      desc.source.type !== 'component' ||\n      desc.source.componentKey !== 'DashboardList'\n    ) {\n      throw new Error('dashboardListMarkdownRenderer: not DashboardList');\n    }\n\n    const dashboards = mockDashboards;\n\n    const lines: string[] = [\n      '# Dashboards',\n      '',\n      '> Browse and manage analytics dashboards',\n      '',\n      '| Dashboard | Widgets | Views | Status | Last Viewed |',\n      '|-----------|---------|-------|--------|-------------|',\n    ];\n\n    for (const dashboard of dashboards) {\n      const lastViewed = dashboard.lastViewedAt\n        ? new Date(dashboard.lastViewedAt).toLocaleDateString()\n        : 'Never';\n      const statusIcon = dashboard.status === 'PUBLISHED' ? '🟢' : '⚫';\n      lines.push(\n        `| [${dashboard.name}](/dashboards/${dashboard.slug}) | ${dashboard.widgetCount} | ${dashboard.viewCount.toLocaleString()} | ${statusIcon} ${dashboard.status} | ${lastViewed} |`\n      );\n    }\n\n    lines.push('');\n    lines.push('## Quick Actions');\n    lines.push('');\n    lines.push('- **Create Dashboard** - Start with a blank canvas');\n    lines.push('- **Import Template** - Use a pre-built template');\n    lines.push('- **Clone Dashboard** - Duplicate an existing dashboard');\n\n    return {\n      mimeType: 'text/markdown',\n      body: lines.join('\\n'),\n    };\n  },\n};\n\n/**\n * Markdown renderer for Query Builder\n */\nexport const queryBuilderMarkdownRenderer: PresentationRenderer<{\n  mimeType: string;\n  body: string;\n}> = {\n  target: 'markdown',\n  render: async (desc) => {\n    if (\n      desc.source.type !== 'component' ||\n      desc.source.componentKey !== 'QueryBuilder'\n    ) {\n      throw new Error('queryBuilderMarkdownRenderer: not QueryBuilder');\n    }\n\n    const queries = mockQueries;\n\n    const lines: string[] = [\n      '# Query Builder',\n      '',\n      '> Create and manage data queries',\n      '',\n      '## Saved Queries',\n      '',\n      '| Query | Type | Shared | Executions |',\n      '|-------|------|--------|------------|',\n    ];\n\n    for (const query of queries) {\n      const sharedIcon = query.isShared ? '🌐' : '🔒';\n      lines.push(\n        `| ${query.name} | ${query.type} | ${sharedIcon} | ${query.executionCount.toLocaleString()} |`\n      );\n    }\n\n    lines.push('');\n    lines.push('## Query Types');\n    lines.push('');\n    lines.push('### METRIC');\n    lines.push('Query usage metrics from the metering system.');\n    lines.push('');\n    lines.push('### AGGREGATION');\n    lines.push(\n      'Build aggregations with measures and dimensions without writing SQL.'\n    );\n    lines.push('');\n    lines.push('### SQL');\n    lines.push('Write custom SQL queries for advanced analysis.');\n    lines.push('');\n    lines.push('## Features');\n    lines.push('');\n    lines.push('- Visual query builder');\n    lines.push('- Auto-complete for fields and functions');\n    lines.push('- Query validation and optimization');\n    lines.push('- Result caching');\n    lines.push('- Query sharing and collaboration');\n\n    return {\n      mimeType: 'text/markdown',\n      body: lines.join('\\n'),\n    };\n  },\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { analyticsDashboardMarkdownRenderer, dashboardListMarkdownRenderer, queryBuilderMarkdownRenderer } from "./analytics.markdown.js";
+export { analyticsDashboardMarkdownRenderer, dashboardListMarkdownRenderer, queryBuilderMarkdownRenderer };

package/dist/ui/renderers/index.js

@@ -0,0 +1,3 @@
+import { analyticsDashboardMarkdownRenderer, dashboardListMarkdownRenderer, queryBuilderMarkdownRenderer } from "./analytics.markdown.js";
+
+export { analyticsDashboardMarkdownRenderer, dashboardListMarkdownRenderer, queryBuilderMarkdownRenderer };

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@contractspec/example.analytics-dashboard",
-  "version": "1.46.0",
+  "version": "1.47.0",
   "description": "Analytics Dashboard example with widgets and query engine for ContractSpec",
-  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "scripts": {
@@ -18,13 +17,20 @@
     "lint:check": "eslint src"
   },
   "dependencies": {
-    "@contractspec/lib.schema": "1.46.0",
-    "@contractspec/lib.contracts": "1.46.0"
+    "@contractspec/lib.schema": "1.47.0",
+    "@contractspec/lib.contracts": "1.47.0",
+    "@contractspec/lib.example-shared-ui": "1.1.0",
+    "@contractspec/lib.design-system": "1.47.0",
+    "@contractspec/lib.runtime-sandbox": "0.2.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
   },
   "devDependencies": {
-    "@contractspec/tool.typescript": "1.46.0",
-    "@contractspec/tool.tsdown": "1.46.0",
-    "typescript": "^5.9.3"
+    "@contractspec/tool.typescript": "1.47.0",
+    "@contractspec/tool.tsdown": "1.47.0",
+    "typescript": "^5.9.3",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.2"
   },
   "exports": {
     ".": "./dist/index.js",
@@ -34,19 +40,29 @@
     "./dashboard/dashboard.operation": "./dist/dashboard/dashboard.operation.js",
     "./dashboard/dashboard.presentation": "./dist/dashboard/dashboard.presentation.js",
     "./dashboard/dashboard.schema": "./dist/dashboard/dashboard.schema.js",
+    "./dashboard/dashboard.test-spec": "./dist/dashboard/dashboard.test-spec.js",
     "./docs": "./dist/docs/index.js",
     "./docs/analytics-dashboard.docblock": "./dist/docs/analytics-dashboard.docblock.js",
     "./events": "./dist/events.js",
     "./example": "./dist/example.js",
+    "./handlers": "./dist/handlers/index.js",
+    "./handlers/analytics.handlers": "./dist/handlers/analytics.handlers.js",
     "./query": "./dist/query/index.js",
     "./query-engine": "./dist/query-engine/index.js",
     "./query/query.enum": "./dist/query/query.enum.js",
     "./query/query.operation": "./dist/query/query.operation.js",
     "./query/query.presentation": "./dist/query/query.presentation.js",
     "./query/query.schema": "./dist/query/query.schema.js",
+    "./query/query.test-spec": "./dist/query/query.test-spec.js",
+    "./seeders": "./dist/seeders/index.js",
+    "./ui": "./dist/ui/index.js",
+    "./ui/AnalyticsDashboard": "./dist/ui/AnalyticsDashboard.js",
+    "./ui/hooks": "./dist/ui/hooks/index.js",
+    "./ui/hooks/useAnalyticsData": "./dist/ui/hooks/useAnalyticsData.js",
+    "./ui/renderers": "./dist/ui/renderers/index.js",
+    "./ui/renderers/analytics.markdown": "./dist/ui/renderers/analytics.markdown.js",
     "./*": "./*"
   },
-  "module": "./dist/index.js",
   "files": [
     "dist",
     "README.md"