@databricks/appkit-ui 0.0.2

package/dist/react/hooks/use-analytics-query.d.ts

@@ -0,0 +1,33 @@
+import { AnalyticsFormat, InferParams, InferResultByFormat, QueryKey, UseAnalyticsQueryOptions, UseAnalyticsQueryResult } from "./types.js";
+
+//#region src/react/hooks/use-analytics-query.d.ts
+
+/**
+ * Subscribe to an analytics query over SSE and returns its latest result.
+ * Integration hook between client and analytics plugin.
+ *
+ * The return type is automatically inferred based on the format:
+ * - `format: "JSON"` (default): Returns typed array from QueryRegistry
+ * - `format: "ARROW"`: Returns TypedArrowTable with row type preserved
+ *
+ * @param queryKey - Analytics query identifier
+ * @param parameters - Query parameters (type-safe based on QueryRegistry)
+ * @param options - Analytics query settings including format
+ * @returns Query result state with format-appropriate data type
+ *
+ * @example JSON format (default)
+ * ```typescript
+ * const { data } = useAnalyticsQuery("spend_data", params);
+ * // data: Array<{ group_key: string; cost_usd: number; ... }> | null
+ * ```
+ *
+ * @example Arrow format
+ * ```typescript
+ * const { data } = useAnalyticsQuery("spend_data", params, { format: "ARROW" });
+ * // data: TypedArrowTable<{ group_key: string; cost_usd: number; ... }> | null
+ * ```
+ */
+declare function useAnalyticsQuery<T = unknown, K extends QueryKey = QueryKey, F extends AnalyticsFormat = "JSON">(queryKey: K, parameters?: InferParams<K> | null, options?: UseAnalyticsQueryOptions<F>): UseAnalyticsQueryResult<InferResultByFormat<T, K, F>>;
+//#endregion
+export { useAnalyticsQuery };
+//# sourceMappingURL=use-analytics-query.d.ts.map

package/dist/react/hooks/use-analytics-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-analytics-query.d.ts","names":[],"sources":["../../../src/react/hooks/use-analytics-query.ts"],"sourcesContent":[],"mappings":";;;;;;AAiDA;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,yCAEJ,WAAW,oBACX,oCAEA,gBACG,YAAY,qBAChB,yBAAyB,KACjC,wBAAwB,oBAAoB,GAAG,GAAG"}

package/dist/react/hooks/use-analytics-query.js

@@ -0,0 +1,146 @@
+import { ArrowClient } from "../../js/arrow/arrow-client.js";
+import { connectSSE } from "../../js/sse/connect-sse.js";
+import "../../js/index.js";
+import { useQueryHMR } from "./use-query-hmr.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+//#region src/react/hooks/use-analytics-query.ts
+function getDevMode() {
+	const dev = new URL(window.location.href).searchParams.get("dev");
+	return dev ? `?dev=${dev}` : "";
+}
+function getArrowStreamUrl(id) {
+	return `/api/analytics/arrow-result/${id}`;
+}
+/**
+* Subscribe to an analytics query over SSE and returns its latest result.
+* Integration hook between client and analytics plugin.
+*
+* The return type is automatically inferred based on the format:
+* - `format: "JSON"` (default): Returns typed array from QueryRegistry
+* - `format: "ARROW"`: Returns TypedArrowTable with row type preserved
+*
+* @param queryKey - Analytics query identifier
+* @param parameters - Query parameters (type-safe based on QueryRegistry)
+* @param options - Analytics query settings including format
+* @returns Query result state with format-appropriate data type
+*
+* @example JSON format (default)
+* ```typescript
+* const { data } = useAnalyticsQuery("spend_data", params);
+* // data: Array<{ group_key: string; cost_usd: number; ... }> | null
+* ```
+*
+* @example Arrow format
+* ```typescript
+* const { data } = useAnalyticsQuery("spend_data", params, { format: "ARROW" });
+* // data: TypedArrowTable<{ group_key: string; cost_usd: number; ... }> | null
+* ```
+*/
+function useAnalyticsQuery(queryKey, parameters, options = {}) {
+	const format = options?.format ?? "JSON";
+	const maxParametersSize = options?.maxParametersSize ?? 100 * 1024;
+	const autoStart = options?.autoStart ?? true;
+	const [data, setData] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const abortControllerRef = useRef(null);
+	if (!queryKey || queryKey.trim().length === 0) throw new Error("useAnalyticsQuery: 'queryKey' must be a non-empty string.");
+	const payload = useMemo(() => {
+		try {
+			const serialized = JSON.stringify({
+				parameters,
+				format
+			});
+			if (new Blob([serialized]).size > maxParametersSize) throw new Error("useAnalyticsQuery: Parameters size exceeds the maximum allowed size");
+			return serialized;
+		} catch (error$1) {
+			console.error("useAnalyticsQuery: Failed to serialize parameters", error$1);
+			return null;
+		}
+	}, [
+		parameters,
+		format,
+		maxParametersSize
+	]);
+	const start = useCallback(() => {
+		if (payload === null) {
+			setError("Failed to serialize query parameters");
+			return;
+		}
+		if (abortControllerRef.current) abortControllerRef.current.abort();
+		setLoading(true);
+		setError(null);
+		setData(null);
+		const abortController = new AbortController();
+		abortControllerRef.current = abortController;
+		const devMode = getDevMode();
+		connectSSE({
+			url: `/api/analytics/query/${encodeURIComponent(queryKey)}${devMode}`,
+			payload,
+			signal: abortController.signal,
+			onMessage: async (message) => {
+				try {
+					const parsed = JSON.parse(message.data);
+					if (parsed.type === "result") {
+						setLoading(false);
+						setData(parsed.data);
+						return;
+					}
+					if (parsed.type === "arrow") try {
+						const arrowData = await ArrowClient.fetchArrow(getArrowStreamUrl(parsed.statement_id));
+						const table = await ArrowClient.processArrowBuffer(arrowData);
+						setLoading(false);
+						setData(table);
+						return;
+					} catch (error$1) {
+						console.error("[useAnalyticsQuery] Failed to fetch Arrow data", error$1);
+						setLoading(false);
+						setError("Unable to load data, please try again");
+						return;
+					}
+					if (parsed.type === "error" || parsed.error || parsed.code) {
+						const errorMsg = parsed.error || parsed.message || "Unable to execute query";
+						setLoading(false);
+						setError(errorMsg);
+						if (parsed.code) console.error(`[useAnalyticsQuery] Code: ${parsed.code}, Message: ${errorMsg}`);
+						return;
+					}
+				} catch (error$1) {
+					console.warn("[useAnalyticsQuery] Malformed message received", error$1);
+				}
+			},
+			onError: (error$1) => {
+				if (abortController.signal.aborted) return;
+				setLoading(false);
+				let userMessage = "Unable to load data, please try again";
+				if (error$1 instanceof Error) {
+					if (error$1.name === "AbortError") userMessage = "Request timed out, please try again";
+					else if (error$1.message.includes("Failed to fetch")) userMessage = "Network error. Please check your connection.";
+					console.error("[useAnalyticsQuery] Error", {
+						queryKey,
+						error: error$1.message,
+						stack: error$1.stack
+					});
+				}
+				setError(userMessage);
+			}
+		});
+	}, [queryKey, payload]);
+	useEffect(() => {
+		if (autoStart) start();
+		return () => {
+			abortControllerRef.current?.abort();
+		};
+	}, [start, autoStart]);
+	useQueryHMR(queryKey, start);
+	return {
+		data,
+		loading,
+		error
+	};
+}
+
+//#endregion
+export { useAnalyticsQuery };
+//# sourceMappingURL=use-analytics-query.js.map

package/dist/react/hooks/use-analytics-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-analytics-query.js","names":["error"],"sources":["../../../src/react/hooks/use-analytics-query.ts"],"sourcesContent":["import { ArrowClient, connectSSE } from \"@/js\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n  AnalyticsFormat,\n  InferParams,\n  InferResultByFormat,\n  QueryKey,\n  UseAnalyticsQueryOptions,\n  UseAnalyticsQueryResult,\n} from \"./types\";\nimport { useQueryHMR } from \"./use-query-hmr\";\n\nfunction getDevMode() {\n  const url = new URL(window.location.href);\n  const searchParams = url.searchParams;\n  const dev = searchParams.get(\"dev\");\n\n  return dev ? `?dev=${dev}` : \"\";\n}\n\nfunction getArrowStreamUrl(id: string) {\n  return `/api/analytics/arrow-result/${id}`;\n}\n\n/**\n * Subscribe to an analytics query over SSE and returns its latest result.\n * Integration hook between client and analytics plugin.\n *\n * The return type is automatically inferred based on the format:\n * - `format: \"JSON\"` (default): Returns typed array from QueryRegistry\n * - `format: \"ARROW\"`: Returns TypedArrowTable with row type preserved\n *\n * @param queryKey - Analytics query identifier\n * @param parameters - Query parameters (type-safe based on QueryRegistry)\n * @param options - Analytics query settings including format\n * @returns Query result state with format-appropriate data type\n *\n * @example JSON format (default)\n * ```typescript\n * const { data } = useAnalyticsQuery(\"spend_data\", params);\n * // data: Array<{ group_key: string; cost_usd: number; ... }> | null\n * ```\n *\n * @example Arrow format\n * ```typescript\n * const { data } = useAnalyticsQuery(\"spend_data\", params, { format: \"ARROW\" });\n * // data: TypedArrowTable<{ group_key: string; cost_usd: number; ... }> | null\n * ```\n */\nexport function useAnalyticsQuery<\n  T = unknown,\n  K extends QueryKey = QueryKey,\n  F extends AnalyticsFormat = \"JSON\",\n>(\n  queryKey: K,\n  parameters?: InferParams<K> | null,\n  options: UseAnalyticsQueryOptions<F> = {} as UseAnalyticsQueryOptions<F>,\n): UseAnalyticsQueryResult<InferResultByFormat<T, K, F>> {\n  const format = options?.format ?? \"JSON\";\n  const maxParametersSize = options?.maxParametersSize ?? 100 * 1024;\n  const autoStart = options?.autoStart ?? true;\n\n  type ResultType = InferResultByFormat<T, K, F>;\n  const [data, setData] = useState<ResultType | null>(null);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  if (!queryKey || queryKey.trim().length === 0) {\n    throw new Error(\n      \"useAnalyticsQuery: 'queryKey' must be a non-empty string.\",\n    );\n  }\n\n  const payload = useMemo(() => {\n    try {\n      const serialized = JSON.stringify({ parameters, format });\n      const sizeInBytes = new Blob([serialized]).size;\n      if (sizeInBytes > maxParametersSize) {\n        throw new Error(\n          \"useAnalyticsQuery: Parameters size exceeds the maximum allowed size\",\n        );\n      }\n\n      return serialized;\n    } catch (error) {\n      console.error(\"useAnalyticsQuery: Failed to serialize parameters\", error);\n      return null;\n    }\n  }, [parameters, format, maxParametersSize]);\n\n  const start = useCallback(() => {\n    if (payload === null) {\n      setError(\"Failed to serialize query parameters\");\n      return;\n    }\n\n    // Abort previous request if exists\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n    }\n\n    setLoading(true);\n    setError(null);\n    setData(null);\n\n    const abortController = new AbortController();\n    abortControllerRef.current = abortController;\n\n    const devMode = getDevMode();\n\n    connectSSE({\n      url: `/api/analytics/query/${encodeURIComponent(queryKey)}${devMode}`,\n      payload: payload,\n      signal: abortController.signal,\n      onMessage: async (message) => {\n        try {\n          const parsed = JSON.parse(message.data);\n\n          // success - JSON format\n          if (parsed.type === \"result\") {\n            setLoading(false);\n            setData(parsed.data as ResultType);\n            return;\n          }\n\n          // success - Arrow format\n          if (parsed.type === \"arrow\") {\n            try {\n              const arrowData = await ArrowClient.fetchArrow(\n                getArrowStreamUrl(parsed.statement_id),\n              );\n              const table = await ArrowClient.processArrowBuffer(arrowData);\n              setLoading(false);\n              // Table is cast to TypedArrowTable with row type from QueryRegistry\n              setData(table as ResultType);\n              return;\n            } catch (error) {\n              console.error(\n                \"[useAnalyticsQuery] Failed to fetch Arrow data\",\n                error,\n              );\n              setLoading(false);\n              setError(\"Unable to load data, please try again\");\n              return;\n            }\n          }\n\n          // error\n          if (parsed.type === \"error\" || parsed.error || parsed.code) {\n            const errorMsg =\n              parsed.error || parsed.message || \"Unable to execute query\";\n\n            setLoading(false);\n            setError(errorMsg);\n\n            if (parsed.code) {\n              console.error(\n                `[useAnalyticsQuery] Code: ${parsed.code}, Message: ${errorMsg}`,\n              );\n            }\n            return;\n          }\n        } catch (error) {\n          console.warn(\"[useAnalyticsQuery] Malformed message received\", error);\n        }\n      },\n      onError: (error) => {\n        if (abortController.signal.aborted) return;\n        setLoading(false);\n\n        let userMessage = \"Unable to load data, please try again\";\n\n        if (error instanceof Error) {\n          if (error.name === \"AbortError\") {\n            userMessage = \"Request timed out, please try again\";\n          } else if (error.message.includes(\"Failed to fetch\")) {\n            userMessage = \"Network error. Please check your connection.\";\n          }\n\n          console.error(\"[useAnalyticsQuery] Error\", {\n            queryKey,\n            error: error.message,\n            stack: error.stack,\n          });\n        }\n        setError(userMessage);\n      },\n    });\n  }, [queryKey, payload]);\n\n  useEffect(() => {\n    if (autoStart) {\n      start();\n    }\n\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, [start, autoStart]);\n\n  // Enable HMR for query updates in dev mode\n  useQueryHMR(queryKey, start);\n\n  return { data, loading, error };\n}\n"],"mappings":";;;;;;;AAYA,SAAS,aAAa;CAGpB,MAAM,MAFM,IAAI,IAAI,OAAO,SAAS,KAAK,CAChB,aACA,IAAI,MAAM;AAEnC,QAAO,MAAM,QAAQ,QAAQ;;AAG/B,SAAS,kBAAkB,IAAY;AACrC,QAAO,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BxC,SAAgB,kBAKd,UACA,YACA,UAAuC,EAAE,EACc;CACvD,MAAM,SAAS,SAAS,UAAU;CAClC,MAAM,oBAAoB,SAAS,qBAAqB,MAAM;CAC9D,MAAM,YAAY,SAAS,aAAa;CAGxC,MAAM,CAAC,MAAM,WAAW,SAA4B,KAAK;CACzD,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CACvD,MAAM,qBAAqB,OAA+B,KAAK;AAE/D,KAAI,CAAC,YAAY,SAAS,MAAM,CAAC,WAAW,EAC1C,OAAM,IAAI,MACR,4DACD;CAGH,MAAM,UAAU,cAAc;AAC5B,MAAI;GACF,MAAM,aAAa,KAAK,UAAU;IAAE;IAAY;IAAQ,CAAC;AAEzD,OADoB,IAAI,KAAK,CAAC,WAAW,CAAC,CAAC,OACzB,kBAChB,OAAM,IAAI,MACR,sEACD;AAGH,UAAO;WACAA,SAAO;AACd,WAAQ,MAAM,qDAAqDA,QAAM;AACzE,UAAO;;IAER;EAAC;EAAY;EAAQ;EAAkB,CAAC;CAE3C,MAAM,QAAQ,kBAAkB;AAC9B,MAAI,YAAY,MAAM;AACpB,YAAS,uCAAuC;AAChD;;AAIF,MAAI,mBAAmB,QACrB,oBAAmB,QAAQ,OAAO;AAGpC,aAAW,KAAK;AAChB,WAAS,KAAK;AACd,UAAQ,KAAK;EAEb,MAAM,kBAAkB,IAAI,iBAAiB;AAC7C,qBAAmB,UAAU;EAE7B,MAAM,UAAU,YAAY;AAE5B,aAAW;GACT,KAAK,wBAAwB,mBAAmB,SAAS,GAAG;GACnD;GACT,QAAQ,gBAAgB;GACxB,WAAW,OAAO,YAAY;AAC5B,QAAI;KACF,MAAM,SAAS,KAAK,MAAM,QAAQ,KAAK;AAGvC,SAAI,OAAO,SAAS,UAAU;AAC5B,iBAAW,MAAM;AACjB,cAAQ,OAAO,KAAmB;AAClC;;AAIF,SAAI,OAAO,SAAS,QAClB,KAAI;MACF,MAAM,YAAY,MAAM,YAAY,WAClC,kBAAkB,OAAO,aAAa,CACvC;MACD,MAAM,QAAQ,MAAM,YAAY,mBAAmB,UAAU;AAC7D,iBAAW,MAAM;AAEjB,cAAQ,MAAoB;AAC5B;cACOA,SAAO;AACd,cAAQ,MACN,kDACAA,QACD;AACD,iBAAW,MAAM;AACjB,eAAS,wCAAwC;AACjD;;AAKJ,SAAI,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,MAAM;MAC1D,MAAM,WACJ,OAAO,SAAS,OAAO,WAAW;AAEpC,iBAAW,MAAM;AACjB,eAAS,SAAS;AAElB,UAAI,OAAO,KACT,SAAQ,MACN,6BAA6B,OAAO,KAAK,aAAa,WACvD;AAEH;;aAEKA,SAAO;AACd,aAAQ,KAAK,kDAAkDA,QAAM;;;GAGzE,UAAU,YAAU;AAClB,QAAI,gBAAgB,OAAO,QAAS;AACpC,eAAW,MAAM;IAEjB,IAAI,cAAc;AAElB,QAAIA,mBAAiB,OAAO;AAC1B,SAAIA,QAAM,SAAS,aACjB,eAAc;cACLA,QAAM,QAAQ,SAAS,kBAAkB,CAClD,eAAc;AAGhB,aAAQ,MAAM,6BAA6B;MACzC;MACA,OAAOA,QAAM;MACb,OAAOA,QAAM;MACd,CAAC;;AAEJ,aAAS,YAAY;;GAExB,CAAC;IACD,CAAC,UAAU,QAAQ,CAAC;AAEvB,iBAAgB;AACd,MAAI,UACF,QAAO;AAGT,eAAa;AACX,sBAAmB,SAAS,OAAO;;IAEpC,CAAC,OAAO,UAAU,CAAC;AAGtB,aAAY,UAAU,MAAM;AAE5B,QAAO;EAAE;EAAM;EAAS;EAAO"}

package/dist/react/hooks/use-chart-data.d.ts

@@ -0,0 +1,54 @@
+import { ChartData, DataFormat } from "../charts/types.js";
+
+//#region src/react/hooks/use-chart-data.d.ts
+interface UseChartDataOptions {
+  /** Analytics query key */
+  queryKey: string;
+  /** Query parameters */
+  parameters?: Record<string, unknown>;
+  /**
+   * Data format preference
+   * - "json": Force JSON format
+   * - "arrow": Force Arrow format
+   * - "auto": Auto-select based on heuristics
+   * @default "auto"
+   */
+  format?: DataFormat;
+  /** Transform data after fetching */
+  transformer?: <T>(data: T) => T;
+}
+interface UseChartDataResult {
+  /** The fetched data (Arrow Table or JSON array) */
+  data: ChartData | null;
+  /** Whether the data is in Arrow format */
+  isArrow: boolean;
+  /** Loading state */
+  loading: boolean;
+  /** Error message if any */
+  error: string | null;
+  /** Whether the data is empty */
+  isEmpty: boolean;
+}
+/**
+ * Hook for fetching chart data in either JSON or Arrow format.
+ * Automatically selects the best format based on query hints.
+ *
+ * @example
+ * ```tsx
+ * // Auto-select format
+ * const { data, isArrow, loading } = useChartData({
+ *   queryKey: "spend_data",
+ *   parameters: { limit: 1000 }
+ * });
+ *
+ * // Force Arrow format
+ * const { data } = useChartData({
+ *   queryKey: "big_query",
+ *   format: "arrow"
+ * });
+ * ```
+ */
+declare function useChartData(options: UseChartDataOptions): UseChartDataResult;
+//#endregion
+export { UseChartDataOptions, UseChartDataResult, useChartData };
+//# sourceMappingURL=use-chart-data.d.ts.map

package/dist/react/hooks/use-chart-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chart-data.d.ts","names":[],"sources":["../../../src/react/hooks/use-chart-data.ts"],"sourcesContent":[],"mappings":";;;UAYiB,mBAAA;;EAAA,QAAA,EAAA,MAAA;EAAmB;YAIrB,CAAA,EAAA,MAAA,CAAA,MAAA,EAAA,OAAA,CAAA;;;;;AAaf;AA0EA;;QAAsC,CAAA,EA/E3B,UA+E2B;;EAAwC,WAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EA7EpD,CA6EoD,EAAA,GA7E9C,CA6E8C;;UA1E7D,kBAAA;;QAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwEQ,YAAA,UAAsB,sBAAsB"}

package/dist/react/hooks/use-chart-data.js

@@ -0,0 +1,80 @@
+import { useAnalyticsQuery } from "./use-analytics-query.js";
+import { useMemo } from "react";
+
+//#region src/react/hooks/use-chart-data.ts
+/** Threshold for auto-selecting Arrow format (row count hint) */
+const ARROW_THRESHOLD = 500;
+/**
+* Resolves the data format based on hints and preferences
+*/
+function resolveFormat(format, parameters) {
+	if (format === "json") return "JSON";
+	if (format === "arrow") return "ARROW";
+	if (format === "auto") {
+		if (parameters?._preferArrow === true) return "ARROW";
+		if (parameters?._preferJson === true) return "JSON";
+		const limit = parameters?.limit;
+		if (typeof limit === "number" && limit > ARROW_THRESHOLD) return "ARROW";
+		if (parameters?.startDate && parameters?.endDate) return "ARROW";
+		return "JSON";
+	}
+	return "JSON";
+}
+/**
+* Hook for fetching chart data in either JSON or Arrow format.
+* Automatically selects the best format based on query hints.
+*
+* @example
+* ```tsx
+* // Auto-select format
+* const { data, isArrow, loading } = useChartData({
+*   queryKey: "spend_data",
+*   parameters: { limit: 1000 }
+* });
+*
+* // Force Arrow format
+* const { data } = useChartData({
+*   queryKey: "big_query",
+*   format: "arrow"
+* });
+* ```
+*/
+function useChartData(options) {
+	const { queryKey, parameters, format = "auto", transformer } = options;
+	const resolvedFormat = useMemo(() => resolveFormat(format, parameters), [format, parameters]);
+	const isArrowFormat = resolvedFormat === "ARROW";
+	const { data: rawData, loading, error } = useAnalyticsQuery(queryKey, parameters, {
+		autoStart: true,
+		format: resolvedFormat
+	});
+	const processedData = useMemo(() => {
+		if (!rawData) return null;
+		if (transformer) try {
+			return transformer(rawData);
+		} catch (err) {
+			console.error("[useChartData] Transformer error:", err);
+			return rawData;
+		}
+		return rawData;
+	}, [rawData, transformer]);
+	const isEmpty = useMemo(() => {
+		if (!processedData) return true;
+		if (typeof processedData === "object" && "numRows" in processedData && typeof processedData.numRows === "number") return processedData.numRows === 0;
+		if (Array.isArray(processedData)) return processedData.length === 0;
+		return true;
+	}, [processedData]);
+	return {
+		data: processedData,
+		isArrow: useMemo(() => {
+			if (!processedData) return isArrowFormat;
+			return typeof processedData === "object" && processedData !== null && "schema" in processedData && "numRows" in processedData && typeof processedData.getChild === "function";
+		}, [processedData, isArrowFormat]),
+		loading,
+		error,
+		isEmpty
+	};
+}
+
+//#endregion
+export { useChartData };
+//# sourceMappingURL=use-chart-data.js.map

package/dist/react/hooks/use-chart-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chart-data.js","names":[],"sources":["../../../src/react/hooks/use-chart-data.ts"],"sourcesContent":["import type { Table } from \"apache-arrow\";\nimport { useMemo } from \"react\";\nimport type { ChartData, DataFormat } from \"../charts/types\";\nimport { useAnalyticsQuery } from \"./use-analytics-query\";\n\n/** Threshold for auto-selecting Arrow format (row count hint) */\nconst ARROW_THRESHOLD = 500;\n\n// ============================================================================\n// Hook Options & Result Types\n// ============================================================================\n\nexport interface UseChartDataOptions {\n  /** Analytics query key */\n  queryKey: string;\n  /** Query parameters */\n  parameters?: Record<string, unknown>;\n  /**\n   * Data format preference\n   * - \"json\": Force JSON format\n   * - \"arrow\": Force Arrow format\n   * - \"auto\": Auto-select based on heuristics\n   * @default \"auto\"\n   */\n  format?: DataFormat;\n  /** Transform data after fetching */\n  transformer?: <T>(data: T) => T;\n}\n\nexport interface UseChartDataResult {\n  /** The fetched data (Arrow Table or JSON array) */\n  data: ChartData | null;\n  /** Whether the data is in Arrow format */\n  isArrow: boolean;\n  /** Loading state */\n  loading: boolean;\n  /** Error message if any */\n  error: string | null;\n  /** Whether the data is empty */\n  isEmpty: boolean;\n}\n\n// ============================================================================\n// Format Resolution\n// ============================================================================\n\n/**\n * Resolves the data format based on hints and preferences\n */\nfunction resolveFormat(\n  format: DataFormat,\n  parameters?: Record<string, unknown>,\n): \"JSON\" | \"ARROW\" {\n  // Explicit format selection\n  if (format === \"json\") return \"JSON\";\n  if (format === \"arrow\") return \"ARROW\";\n\n  // Auto-selection heuristics\n  if (format === \"auto\") {\n    // Check for explicit hint in parameters\n    if (parameters?._preferArrow === true) return \"ARROW\";\n    if (parameters?._preferJson === true) return \"JSON\";\n\n    // Check limit parameter as data size hint\n    const limit = parameters?.limit;\n    if (typeof limit === \"number\" && limit > ARROW_THRESHOLD) {\n      return \"ARROW\";\n    }\n\n    // Check for date range queries (often large)\n    if (parameters?.startDate && parameters?.endDate) {\n      return \"ARROW\";\n    }\n\n    return \"JSON\";\n  }\n\n  return \"JSON\";\n}\n\n// ============================================================================\n// Main Hook\n// ============================================================================\n\n/**\n * Hook for fetching chart data in either JSON or Arrow format.\n * Automatically selects the best format based on query hints.\n *\n * @example\n * ```tsx\n * // Auto-select format\n * const { data, isArrow, loading } = useChartData({\n *   queryKey: \"spend_data\",\n *   parameters: { limit: 1000 }\n * });\n *\n * // Force Arrow format\n * const { data } = useChartData({\n *   queryKey: \"big_query\",\n *   format: \"arrow\"\n * });\n * ```\n */\nexport function useChartData(options: UseChartDataOptions): UseChartDataResult {\n  const { queryKey, parameters, format = \"auto\", transformer } = options;\n\n  // Resolve the format to use\n  const resolvedFormat = useMemo(\n    () => resolveFormat(format, parameters),\n    [format, parameters],\n  );\n\n  const isArrowFormat = resolvedFormat === \"ARROW\";\n\n  // Fetch data using the analytics query hook\n  const {\n    data: rawData,\n    loading,\n    error,\n  } = useAnalyticsQuery(queryKey, parameters, {\n    autoStart: true,\n    format: resolvedFormat,\n  });\n\n  // Process and transform data\n  const processedData = useMemo(() => {\n    if (!rawData) return null;\n\n    // Apply transformer if provided\n    if (transformer) {\n      try {\n        return transformer(rawData);\n      } catch (err) {\n        console.error(\"[useChartData] Transformer error:\", err);\n        return rawData;\n      }\n    }\n\n    return rawData;\n  }, [rawData, transformer]);\n\n  // Determine if data is empty\n  const isEmpty = useMemo(() => {\n    if (!processedData) return true;\n\n    // Arrow Table - check using duck typing\n    if (\n      typeof processedData === \"object\" &&\n      \"numRows\" in processedData &&\n      typeof (processedData as Table).numRows === \"number\"\n    ) {\n      return (processedData as Table).numRows === 0;\n    }\n\n    // JSON Array\n    if (Array.isArray(processedData)) {\n      return processedData.length === 0;\n    }\n\n    return true;\n  }, [processedData]);\n\n  // Detect actual data type (may differ from requested if server doesn't support format)\n  const isArrow = useMemo(() => {\n    if (!processedData) return isArrowFormat;\n    // Duck type check for Arrow Table\n    return (\n      typeof processedData === \"object\" &&\n      processedData !== null &&\n      \"schema\" in processedData &&\n      \"numRows\" in processedData &&\n      typeof (processedData as Table).getChild === \"function\"\n    );\n  }, [processedData, isArrowFormat]);\n\n  return {\n    data: processedData as ChartData | null,\n    isArrow,\n    loading,\n    error,\n    isEmpty,\n  };\n}\n"],"mappings":";;;;;AAMA,MAAM,kBAAkB;;;;AA2CxB,SAAS,cACP,QACA,YACkB;AAElB,KAAI,WAAW,OAAQ,QAAO;AAC9B,KAAI,WAAW,QAAS,QAAO;AAG/B,KAAI,WAAW,QAAQ;AAErB,MAAI,YAAY,iBAAiB,KAAM,QAAO;AAC9C,MAAI,YAAY,gBAAgB,KAAM,QAAO;EAG7C,MAAM,QAAQ,YAAY;AAC1B,MAAI,OAAO,UAAU,YAAY,QAAQ,gBACvC,QAAO;AAIT,MAAI,YAAY,aAAa,YAAY,QACvC,QAAO;AAGT,SAAO;;AAGT,QAAO;;;;;;;;;;;;;;;;;;;;;AA0BT,SAAgB,aAAa,SAAkD;CAC7E,MAAM,EAAE,UAAU,YAAY,SAAS,QAAQ,gBAAgB;CAG/D,MAAM,iBAAiB,cACf,cAAc,QAAQ,WAAW,EACvC,CAAC,QAAQ,WAAW,CACrB;CAED,MAAM,gBAAgB,mBAAmB;CAGzC,MAAM,EACJ,MAAM,SACN,SACA,UACE,kBAAkB,UAAU,YAAY;EAC1C,WAAW;EACX,QAAQ;EACT,CAAC;CAGF,MAAM,gBAAgB,cAAc;AAClC,MAAI,CAAC,QAAS,QAAO;AAGrB,MAAI,YACF,KAAI;AACF,UAAO,YAAY,QAAQ;WACpB,KAAK;AACZ,WAAQ,MAAM,qCAAqC,IAAI;AACvD,UAAO;;AAIX,SAAO;IACN,CAAC,SAAS,YAAY,CAAC;CAG1B,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAG3B,MACE,OAAO,kBAAkB,YACzB,aAAa,iBACb,OAAQ,cAAwB,YAAY,SAE5C,QAAQ,cAAwB,YAAY;AAI9C,MAAI,MAAM,QAAQ,cAAc,CAC9B,QAAO,cAAc,WAAW;AAGlC,SAAO;IACN,CAAC,cAAc,CAAC;AAenB,QAAO;EACL,MAAM;EACN,SAdc,cAAc;AAC5B,OAAI,CAAC,cAAe,QAAO;AAE3B,UACE,OAAO,kBAAkB,YACzB,kBAAkB,QAClB,YAAY,iBACZ,aAAa,iBACb,OAAQ,cAAwB,aAAa;KAE9C,CAAC,eAAe,cAAc,CAAC;EAKhC;EACA;EACA;EACD"}

package/dist/react/hooks/use-mobile.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+//#region src/react/hooks/use-mobile.ts
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState(void 0);
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return !!isMobile;
+}
+
+//#endregion
+export { useIsMobile };
+//# sourceMappingURL=use-mobile.js.map

package/dist/react/hooks/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.js","names":[],"sources":["../../../src/react/hooks/use-mobile.ts"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return !!isMobile;\n}\n"],"mappings":";;;AAEA,MAAM,oBAAoB;AAE1B,SAAgB,cAAc;CAC5B,MAAM,CAAC,UAAU,eAAe,MAAM,SACpC,OACD;AAED,OAAM,gBAAgB;EACpB,MAAM,MAAM,OAAO,WAAW,eAAe,oBAAoB,EAAE,KAAK;EACxE,MAAM,iBAAiB;AACrB,eAAY,OAAO,aAAa,kBAAkB;;AAEpD,MAAI,iBAAiB,UAAU,SAAS;AACxC,cAAY,OAAO,aAAa,kBAAkB;AAClD,eAAa,IAAI,oBAAoB,UAAU,SAAS;IACvD,EAAE,CAAC;AAEN,QAAO,CAAC,CAAC"}

package/dist/react/hooks/use-query-hmr.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+//#region src/react/hooks/use-query-hmr.ts
+function useQueryHMR(key, onUpdate) {
+	useEffect(() => {
+		if (!import.meta.env.DEV || !import.meta.hot) return;
+		const handler = (data) => {
+			if (data.key === key) onUpdate(Date.now());
+		};
+		import.meta.hot.on("query-update", handler);
+		return () => {
+			import.meta.hot?.off?.("query-update", handler);
+		};
+	}, [key, onUpdate]);
+}
+
+//#endregion
+export { useQueryHMR };
+//# sourceMappingURL=use-query-hmr.js.map

package/dist/react/hooks/use-query-hmr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-query-hmr.js","names":[],"sources":["../../../src/react/hooks/use-query-hmr.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nexport function useQueryHMR(\n  key: string,\n  onUpdate: (timestamp: number) => void,\n) {\n  useEffect(() => {\n    // 1. only run in dev mode with HMR\n    if (!import.meta.env.DEV || !import.meta.hot) return;\n\n    // 2. listen for hmr updates\n    const handler = (data: { key: string; timestamp: number }) => {\n      if (data.key === key) {\n        onUpdate(Date.now());\n      }\n    };\n\n    // 3. register listener\n    import.meta.hot.on(\"query-update\", handler);\n\n    return () => {\n      // 4. cleanup listener on unmount\n      import.meta.hot?.off?.(\"query-update\", handler);\n    };\n  }, [key, onUpdate]);\n}\n"],"mappings":";;;AAEA,SAAgB,YACd,KACA,UACA;AACA,iBAAgB;AAEd,MAAI,CAAC,OAAO,KAAK,IAAI,OAAO,CAAC,OAAO,KAAK,IAAK;EAG9C,MAAM,WAAW,SAA6C;AAC5D,OAAI,KAAK,QAAQ,IACf,UAAS,KAAK,KAAK,CAAC;;AAKxB,SAAO,KAAK,IAAI,GAAG,gBAAgB,QAAQ;AAE3C,eAAa;AAEX,UAAO,KAAK,KAAK,MAAM,gBAAgB,QAAQ;;IAEhD,CAAC,KAAK,SAAS,CAAC"}

package/dist/react/index.d.ts

@@ -0,0 +1,75 @@
+import { DATE_FIELD_PATTERNS, METADATA_DATE_PATTERNS, NAME_FIELD_PATTERNS } from "../js/constants.js";
+import { AreaChartProps, AreaChartSpecificProps, BarChartProps, BarChartSpecificProps, ChartBaseProps, ChartColorPalette, ChartData, ChartType, DataFormat, DataProps, DonutChartProps, HeatmapChartProps, HeatmapChartSpecificProps, LineChartProps, LineChartSpecificProps, NormalizedChartData, NormalizedChartDataBase, Orientation, PieChartProps, PieChartSpecificProps, QueryProps, RadarChartProps, RadarChartSpecificProps, ScatterChartProps, ScatterChartSpecificProps, UnifiedChartProps, isArrowTable, isDataProps, isQueryProps } from "./charts/types.js";
+import { AreaChart } from "./charts/area/index.js";
+import { BarChart } from "./charts/bar/index.js";
+import { HeatmapChart } from "./charts/heatmap/index.js";
+import { LineChart } from "./charts/line/index.js";
+import { DonutChart, PieChart } from "./charts/pie/index.js";
+import { RadarChart } from "./charts/radar/index.js";
+import { ScatterChart } from "./charts/scatter/index.js";
+import { UseChartDataOptions, UseChartDataResult, useChartData } from "./hooks/use-chart-data.js";
+import { BaseChart, BaseChartProps } from "./charts/base.js";
+import { createChart } from "./charts/create-chart.js";
+import { ChartWrapper, ChartWrapperProps } from "./charts/wrapper.js";
+import { NormalizedHeatmapData, normalizeChartData, normalizeHeatmapData } from "./charts/normalize.js";
+import { CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, FALLBACK_COLORS, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL } from "./charts/constants.js";
+import { useAllThemeColors, useThemeColors } from "./charts/theme.js";
+import { createTimeSeriesData, formatLabel, sortTimeSeriesAscending, toChartArray, toChartValue, truncateLabel } from "./charts/utils.js";
+import { CartesianContext, HeatmapContext, OptionBuilderContext, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption } from "./charts/options.js";
+import { AnalyticsFormat, InferResultByFormat, InferRowType, PluginRegistry, QueryRegistry, TypedArrowTable, UseAnalyticsQueryOptions, UseAnalyticsQueryResult } from "./hooks/types.js";
+import { useAnalyticsQuery } from "./hooks/use-analytics-query.js";
+import { DataTable } from "./table/data-table.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./ui/accordion.js";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./ui/alert-dialog.js";
+import { AspectRatio } from "./ui/aspect-ratio.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar.js";
+import { Badge, badgeVariants } from "./ui/badge.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./ui/breadcrumb.js";
+import { Button, buttonVariants } from "./ui/button.js";
+import { Separator } from "./ui/separator.js";
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from "./ui/button-group.js";
+import { Calendar, CalendarDayButton } from "./ui/calendar.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card.js";
+import { Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "./ui/carousel.js";
+import { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "./ui/chart.js";
+import { Checkbox } from "./ui/checkbox.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./ui/dialog.js";
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./ui/command.js";
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./ui/context-menu.js";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./ui/drawer.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./ui/dropdown-menu.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./ui/empty.js";
+import { Label } from "./ui/label.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./ui/field.js";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./ui/form.js";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card.js";
+import { Input } from "./ui/input.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./ui/input-group.js";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./ui/input-otp.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from "./ui/item.js";
+import { Kbd, KbdGroup } from "./ui/kbd.js";
+import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./ui/menubar.js";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from "./ui/navigation-menu.js";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./ui/pagination.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./ui/popover.js";
+import { Progress } from "./ui/progress.js";
+import { RadioGroup, RadioGroupItem } from "./ui/radio-group.js";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resizable.js";
+import { ScrollArea, ScrollBar } from "./ui/scroll-area.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./ui/select.js";
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./ui/sheet.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./ui/sidebar.js";
+import { Skeleton } from "./ui/skeleton.js";
+import { Slider } from "./ui/slider.js";
+import { Toaster } from "./ui/sonner.js";
+import { Spinner } from "./ui/spinner.js";
+import { Switch } from "./ui/switch.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./ui/table.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs.js";
+import { Textarea } from "./ui/textarea.js";
+import { Toggle, toggleVariants } from "./ui/toggle.js";
+import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group.js";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnalyticsFormat, AreaChart, AreaChartProps, AreaChartSpecificProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BarChartProps, BarChartSpecificProps, BaseChart, BaseChartProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CartesianContext, ChartBaseProps, ChartColorPalette, ChartConfig, ChartContainer, ChartData, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChartType, ChartWrapper, ChartWrapperProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataFormat, DataProps, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, DonutChartProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeatmapChart, HeatmapChartProps, HeatmapChartSpecificProps, HeatmapContext, HoverCard, HoverCardContent, HoverCardTrigger, InferResultByFormat, InferRowType, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LineChartProps, LineChartSpecificProps, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NormalizedChartData, NormalizedChartDataBase, NormalizedHeatmapData, OptionBuilderContext, Orientation, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, PieChartProps, PieChartSpecificProps, PluginRegistry, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, QueryProps, QueryRegistry, RadarChart, RadarChartProps, RadarChartSpecificProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScatterChart, ScatterChartProps, ScatterChartSpecificProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypedArrowTable, UnifiedChartProps, UseAnalyticsQueryOptions, UseAnalyticsQueryResult, UseChartDataOptions, UseChartDataResult, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, createChart, createTimeSeriesData, formatLabel, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, truncateLabel, useAllThemeColors, useAnalyticsQuery, useChartData, useFormField, useSidebar, useThemeColors };

package/dist/react/index.js

@@ -0,0 +1,79 @@
+import { DATE_FIELD_PATTERNS, METADATA_DATE_PATTERNS, NAME_FIELD_PATTERNS } from "../js/constants.js";
+import { CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, FALLBACK_COLORS, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL } from "./charts/constants.js";
+import { isArrowTable, isDataProps, isQueryProps } from "./charts/types.js";
+import { createTimeSeriesData, formatLabel, sortTimeSeriesAscending, toChartArray, toChartValue, truncateLabel } from "./charts/utils.js";
+import { normalizeChartData, normalizeHeatmapData } from "./charts/normalize.js";
+import { buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption } from "./charts/options.js";
+import { useAllThemeColors, useThemeColors } from "./charts/theme.js";
+import { BaseChart } from "./charts/base.js";
+import { useAnalyticsQuery } from "./hooks/use-analytics-query.js";
+import { useChartData } from "./hooks/use-chart-data.js";
+import { ChartWrapper } from "./charts/wrapper.js";
+import { createChart } from "./charts/create-chart.js";
+import { AreaChart } from "./charts/area/index.js";
+import { BarChart } from "./charts/bar/index.js";
+import { HeatmapChart } from "./charts/heatmap/index.js";
+import { LineChart } from "./charts/line/index.js";
+import { DonutChart, PieChart } from "./charts/pie/index.js";
+import { RadarChart } from "./charts/radar/index.js";
+import { ScatterChart } from "./charts/scatter/index.js";
+import "./charts/index.js";
+import "./hooks/index.js";
+import { Button, buttonVariants } from "./ui/button.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./ui/dropdown-menu.js";
+import { Input } from "./ui/input.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./ui/select.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./ui/table.js";
+import { Checkbox } from "./ui/checkbox.js";
+import { DataTable } from "./table/data-table.js";
+import "./table/index.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./ui/accordion.js";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./ui/alert-dialog.js";
+import { AspectRatio } from "./ui/aspect-ratio.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar.js";
+import { Badge, badgeVariants } from "./ui/badge.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./ui/breadcrumb.js";
+import { Separator } from "./ui/separator.js";
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from "./ui/button-group.js";
+import { Calendar, CalendarDayButton } from "./ui/calendar.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card.js";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "./ui/carousel.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "./ui/chart.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./ui/dialog.js";
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./ui/command.js";
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./ui/context-menu.js";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./ui/drawer.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./ui/empty.js";
+import { Label } from "./ui/label.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./ui/field.js";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./ui/form.js";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card.js";
+import { Textarea } from "./ui/textarea.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./ui/input-group.js";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./ui/input-otp.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from "./ui/item.js";
+import { Kbd, KbdGroup } from "./ui/kbd.js";
+import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./ui/menubar.js";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from "./ui/navigation-menu.js";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./ui/pagination.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./ui/popover.js";
+import { Progress } from "./ui/progress.js";
+import { RadioGroup, RadioGroupItem } from "./ui/radio-group.js";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resizable.js";
+import { ScrollArea, ScrollBar } from "./ui/scroll-area.js";
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./ui/sheet.js";
+import { Skeleton } from "./ui/skeleton.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./ui/sidebar.js";
+import { Slider } from "./ui/slider.js";
+import { Toaster } from "./ui/sonner.js";
+import { Spinner } from "./ui/spinner.js";
+import { Switch } from "./ui/switch.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs.js";
+import { Toggle, toggleVariants } from "./ui/toggle.js";
+import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group.js";
+import "./ui/index.js";
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BaseChart, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChartWrapper, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeatmapChart, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScatterChart, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, createChart, createTimeSeriesData, formatLabel, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, truncateLabel, useAllThemeColors, useAnalyticsQuery, useChartData, useFormField, useSidebar, useThemeColors };