@databricks/appkit-ui 0.41.4 → 0.41.6

package/dist/react/charts/theme.js

@@ -1,5 +1,5 @@
-import { CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL } from "./constants.js";
-import { useEffect, useState } from "react";
+import { CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, CHART_UI_VARS, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, FALLBACK_UI_TOKENS } from "./constants.js";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 //#region src/react/charts/theme.ts
 const PALETTE_CONFIG = {
@@ -21,13 +21,12 @@ const PALETTE_CONFIG = {
 * Cache is cleared when theme change events fire (MutationObserver/matchMedia).
 */
 const colorCache = /* @__PURE__ */ new Map();
-/**
-* Clears the theme color cache.
-* Called when theme change events fire, or for testing when mocks change.
-* @internal
-*/
-function resetThemeColorCache() {
+/** Cache for the computed chart UI tokens (axis text, grid lines). */
+let uiTokenCache = null;
+/** Clears both theme caches (palette colors + UI tokens). */
+function clearThemeCaches() {
 	colorCache.clear();
+	uiTokenCache = null;
 }
 /**
 * Gets theme colors with module-level caching.
@@ -49,6 +48,72 @@ function getThemeColors(palette = "categorical") {
 	return result;
 }
 /**
+* Gets the chart UI tokens (axis text, titles, grid lines) with caching.
+* Authored in `hsla` because ECharts/zrender cannot parse the `oklch` semantic
+* tokens.
+*/
+function getThemeUITokens() {
+	if (typeof window === "undefined") return FALLBACK_UI_TOKENS;
+	if (uiTokenCache) return uiTokenCache;
+	const styles = getComputedStyle(document.documentElement);
+	const read = (varName, fallback) => {
+		return styles.getPropertyValue(varName).trim() || fallback;
+	};
+	uiTokenCache = {
+		axisLabel: read(CHART_UI_VARS.axisLabel, FALLBACK_UI_TOKENS.axisLabel),
+		axisTitle: read(CHART_UI_VARS.axisTitle, FALLBACK_UI_TOKENS.axisTitle),
+		grid: read(CHART_UI_VARS.grid, FALLBACK_UI_TOKENS.grid),
+		tooltipBg: read(CHART_UI_VARS.tooltipBg, FALLBACK_UI_TOKENS.tooltipBg)
+	};
+	return uiTokenCache;
+}
+const subscribers = /* @__PURE__ */ new Set();
+let teardownListeners = null;
+function handleThemeChange() {
+	clearThemeCaches();
+	for (const notify of [...subscribers]) notify();
+}
+function ensureListening() {
+	if (teardownListeners) return;
+	const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+	mediaQuery.addEventListener("change", handleThemeChange);
+	const observer = new MutationObserver(handleThemeChange);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: [
+			"class",
+			"data-theme",
+			"data-mode"
+		]
+	});
+	teardownListeners = () => {
+		mediaQuery.removeEventListener("change", handleThemeChange);
+		observer.disconnect();
+	};
+}
+/**
+* Subscribes `onChange` to theme changes (system color scheme via matchMedia, or
+* a theme attribute on the root element). Listeners are shared and ref-counted,
+* so each hook subscribes once per mount regardless of how `onChange`'s identity
+* changes between renders.
+*/
+function useThemeChangeEffect(onChange) {
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	useEffect(() => {
+		const subscriber = () => onChangeRef.current();
+		subscribers.add(subscriber);
+		ensureListening();
+		return () => {
+			subscribers.delete(subscriber);
+			if (subscribers.size === 0 && teardownListeners) {
+				teardownListeners();
+				teardownListeners = null;
+			}
+		};
+	}, []);
+}
+/**
 * Hook to get theme colors with automatic updates on theme change.
 * Re-resolves CSS variables when color scheme or theme attributes change.
 *
@@ -56,30 +121,24 @@ function getThemeColors(palette = "categorical") {
 */
 function useThemeColors(palette = "categorical") {
 	const [colors, setColors] = useState(() => typeof window === "undefined" ? PALETTE_CONFIG[palette].fallback : getThemeColors(palette));
-	useEffect(() => {
-		const updateColors = () => {
-			resetThemeColorCache();
-			setColors(getThemeColors(palette));
-		};
-		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-		mediaQuery.addEventListener("change", updateColors);
-		const observer = new MutationObserver(updateColors);
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: [
-				"class",
-				"data-theme",
-				"data-mode"
-			]
-		});
-		return () => {
-			mediaQuery.removeEventListener("change", updateColors);
-			observer.disconnect();
-		};
-	}, [palette]);
+	useThemeChangeEffect(useCallback(() => {
+		setColors(getThemeColors(palette));
+	}, [palette]));
 	return colors;
 }
 /**
+* Hook to get the chart UI tokens (axis text, titles, grid lines) with automatic
+* updates on theme change. Pass the result into the ECharts option builders so
+* axis labels, lines, legends, and titles follow the active theme.
+*/
+function useChartUITokens() {
+	const [tokens, setTokens] = useState(() => typeof window === "undefined" ? FALLBACK_UI_TOKENS : getThemeUITokens());
+	useThemeChangeEffect(useCallback(() => {
+		setTokens(getThemeUITokens());
+	}, []));
+	return tokens;
+}
+/**
 * Hook to get all three color palettes at once.
 * Useful when a component needs access to multiple palette types.
 */
@@ -92,5 +151,5 @@ function useAllThemeColors() {
 }
 
 //#endregion
-export { useAllThemeColors, useThemeColors };
+export { useAllThemeColors, useChartUITokens, useThemeColors };
 //# sourceMappingURL=theme.js.map

package/dist/react/charts/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../../src/react/charts/theme.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport {\n  CHART_COLOR_VARS_CATEGORICAL,\n  CHART_COLOR_VARS_DIVERGING,\n  CHART_COLOR_VARS_SEQUENTIAL,\n  FALLBACK_COLORS_CATEGORICAL,\n  FALLBACK_COLORS_DIVERGING,\n  FALLBACK_COLORS_SEQUENTIAL,\n} from \"./constants\";\nimport type { ChartColorPalette } from \"./types\";\n\n// ============================================================================\n// Theme Colors (resolved from CSS variables)\n// ============================================================================\n\nconst PALETTE_CONFIG: Record<\n  ChartColorPalette,\n  { vars: readonly string[]; fallback: string[] }\n> = {\n  categorical: {\n    vars: CHART_COLOR_VARS_CATEGORICAL,\n    fallback: FALLBACK_COLORS_CATEGORICAL,\n  },\n  sequential: {\n    vars: CHART_COLOR_VARS_SEQUENTIAL,\n    fallback: FALLBACK_COLORS_SEQUENTIAL,\n  },\n  diverging: {\n    vars: CHART_COLOR_VARS_DIVERGING,\n    fallback: FALLBACK_COLORS_DIVERGING,\n  },\n};\n\n// ============================================================================\n// Module-Level Caching\n// ============================================================================\n\n/**\n * Cache for computed theme colors to avoid repeated CSS variable lookups.\n * Cache is cleared when theme change events fire (MutationObserver/matchMedia).\n */\nconst colorCache = new Map<string, string[]>();\n\n/**\n * Clears the theme color cache.\n * Called when theme change events fire, or for testing when mocks change.\n * @internal\n */\nexport function resetThemeColorCache(): void {\n  colorCache.clear();\n}\n\n/**\n * Gets theme colors with module-level caching.\n * Avoids repeated CSS variable lookups for the same palette within a theme.\n */\nfunction getThemeColors(palette: ChartColorPalette = \"categorical\"): string[] {\n  const config = PALETTE_CONFIG[palette];\n\n  if (typeof window === \"undefined\") return config.fallback;\n\n  // Return cached colors if available\n  const cached = colorCache.get(palette);\n  if (cached) {\n    return cached;\n  }\n\n  // Compute colors from CSS variables\n  const styles = getComputedStyle(document.documentElement);\n  const colors: string[] = [];\n\n  for (const varName of config.vars) {\n    const value = styles.getPropertyValue(varName).trim();\n    if (value) colors.push(value);\n  }\n\n  const result = colors.length > 0 ? colors : config.fallback;\n\n  // Cache the result\n  colorCache.set(palette, result);\n\n  return result;\n}\n\n/**\n * Hook to get theme colors with automatic updates on theme change.\n * Re-resolves CSS variables when color scheme or theme attributes change.\n *\n * @param palette - Color palette type: \"categorical\" (default), \"sequential\", or \"diverging\"\n */\nexport function useThemeColors(\n  palette: ChartColorPalette = \"categorical\",\n): string[] {\n  const [colors, setColors] = useState<string[]>(() =>\n    typeof window === \"undefined\"\n      ? PALETTE_CONFIG[palette].fallback\n      : getThemeColors(palette),\n  );\n\n  useEffect(() => {\n    // Clear cache and re-fetch colors when theme changes\n    const updateColors = () => {\n      resetThemeColorCache();\n      setColors(getThemeColors(palette));\n    };\n\n    // Listen for system color scheme changes\n    const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    mediaQuery.addEventListener(\"change\", updateColors);\n\n    // Listen for theme attribute changes (e.g., class=\"dark\", data-theme=\"dark\")\n    const observer = new MutationObserver(updateColors);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\", \"data-mode\"],\n    });\n\n    return () => {\n      mediaQuery.removeEventListener(\"change\", updateColors);\n      observer.disconnect();\n    };\n  }, [palette]);\n\n  return colors;\n}\n\n/**\n * Hook to get all three color palettes at once.\n * Useful when a component needs access to multiple palette types.\n */\nexport function useAllThemeColors(): {\n  categorical: string[];\n  sequential: string[];\n  diverging: string[];\n} {\n  const categorical = useThemeColors(\"categorical\");\n  const sequential = useThemeColors(\"sequential\");\n  const diverging = useThemeColors(\"diverging\");\n\n  return { categorical, sequential, diverging };\n}\n"],"mappings":";;;;AAeA,MAAM,iBAGF;CACF,aAAa;EACX,MAAM;EACN,UAAU;EACX;CACD,YAAY;EACV,MAAM;EACN,UAAU;EACX;CACD,WAAW;EACT,MAAM;EACN,UAAU;EACX;CACF;;;;;AAUD,MAAM,6BAAa,IAAI,KAAuB;;;;;;AAO9C,SAAgB,uBAA6B;AAC3C,YAAW,OAAO;;;;;;AAOpB,SAAS,eAAe,UAA6B,eAAyB;CAC5E,MAAM,SAAS,eAAe;AAE9B,KAAI,OAAO,WAAW,YAAa,QAAO,OAAO;CAGjD,MAAM,SAAS,WAAW,IAAI,QAAQ;AACtC,KAAI,OACF,QAAO;CAIT,MAAM,SAAS,iBAAiB,SAAS,gBAAgB;CACzD,MAAM,SAAmB,EAAE;AAE3B,MAAK,MAAM,WAAW,OAAO,MAAM;EACjC,MAAM,QAAQ,OAAO,iBAAiB,QAAQ,CAAC,MAAM;AACrD,MAAI,MAAO,QAAO,KAAK,MAAM;;CAG/B,MAAM,SAAS,OAAO,SAAS,IAAI,SAAS,OAAO;AAGnD,YAAW,IAAI,SAAS,OAAO;AAE/B,QAAO;;;;;;;;AAST,SAAgB,eACd,UAA6B,eACnB;CACV,MAAM,CAAC,QAAQ,aAAa,eAC1B,OAAO,WAAW,cACd,eAAe,SAAS,WACxB,eAAe,QAAQ,CAC5B;AAED,iBAAgB;EAEd,MAAM,qBAAqB;AACzB,yBAAsB;AACtB,aAAU,eAAe,QAAQ,CAAC;;EAIpC,MAAM,aAAa,OAAO,WAAW,+BAA+B;AACpE,aAAW,iBAAiB,UAAU,aAAa;EAGnD,MAAM,WAAW,IAAI,iBAAiB,aAAa;AACnD,WAAS,QAAQ,SAAS,iBAAiB;GACzC,YAAY;GACZ,iBAAiB;IAAC;IAAS;IAAc;IAAY;GACtD,CAAC;AAEF,eAAa;AACX,cAAW,oBAAoB,UAAU,aAAa;AACtD,YAAS,YAAY;;IAEtB,CAAC,QAAQ,CAAC;AAEb,QAAO;;;;;;AAOT,SAAgB,oBAId;AAKA,QAAO;EAAE,aAJW,eAAe,cAAc;EAI3B,YAHH,eAAe,aAAa;EAGb,WAFhB,eAAe,YAAY;EAEA"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../../src/react/charts/theme.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  CHART_COLOR_VARS_CATEGORICAL,\n  CHART_COLOR_VARS_DIVERGING,\n  CHART_COLOR_VARS_SEQUENTIAL,\n  CHART_UI_VARS,\n  FALLBACK_COLORS_CATEGORICAL,\n  FALLBACK_COLORS_DIVERGING,\n  FALLBACK_COLORS_SEQUENTIAL,\n  FALLBACK_UI_TOKENS,\n} from \"./constants\";\nimport type { ChartColorPalette, ChartUITokens } from \"./types\";\n\n// ============================================================================\n// Theme Colors (resolved from CSS variables)\n// ============================================================================\n\nconst PALETTE_CONFIG: Record<\n  ChartColorPalette,\n  { vars: readonly string[]; fallback: string[] }\n> = {\n  categorical: {\n    vars: CHART_COLOR_VARS_CATEGORICAL,\n    fallback: FALLBACK_COLORS_CATEGORICAL,\n  },\n  sequential: {\n    vars: CHART_COLOR_VARS_SEQUENTIAL,\n    fallback: FALLBACK_COLORS_SEQUENTIAL,\n  },\n  diverging: {\n    vars: CHART_COLOR_VARS_DIVERGING,\n    fallback: FALLBACK_COLORS_DIVERGING,\n  },\n};\n\n// ============================================================================\n// Module-Level Caching\n// ============================================================================\n\n/**\n * Cache for computed theme colors to avoid repeated CSS variable lookups.\n * Cache is cleared when theme change events fire (MutationObserver/matchMedia).\n */\nconst colorCache = new Map<string, string[]>();\n\n/** Cache for the computed chart UI tokens (axis text, grid lines). */\nlet uiTokenCache: ChartUITokens | null = null;\n\n/** Clears both theme caches (palette colors + UI tokens). */\nfunction clearThemeCaches(): void {\n  colorCache.clear();\n  uiTokenCache = null;\n}\n\n/**\n * Gets theme colors with module-level caching.\n * Avoids repeated CSS variable lookups for the same palette within a theme.\n */\nfunction getThemeColors(palette: ChartColorPalette = \"categorical\"): string[] {\n  const config = PALETTE_CONFIG[palette];\n\n  if (typeof window === \"undefined\") return config.fallback;\n\n  // Return cached colors if available\n  const cached = colorCache.get(palette);\n  if (cached) {\n    return cached;\n  }\n\n  // Compute colors from CSS variables\n  const styles = getComputedStyle(document.documentElement);\n  const colors: string[] = [];\n\n  for (const varName of config.vars) {\n    const value = styles.getPropertyValue(varName).trim();\n    if (value) colors.push(value);\n  }\n\n  const result = colors.length > 0 ? colors : config.fallback;\n\n  // Cache the result\n  colorCache.set(palette, result);\n\n  return result;\n}\n\n/**\n * Gets the chart UI tokens (axis text, titles, grid lines) with caching.\n * Authored in `hsla` because ECharts/zrender cannot parse the `oklch` semantic\n * tokens.\n */\nfunction getThemeUITokens(): ChartUITokens {\n  if (typeof window === \"undefined\") return FALLBACK_UI_TOKENS;\n\n  if (uiTokenCache) return uiTokenCache;\n\n  const styles = getComputedStyle(document.documentElement);\n  const read = (varName: string, fallback: string): string => {\n    const value = styles.getPropertyValue(varName).trim();\n    return value || fallback;\n  };\n\n  uiTokenCache = {\n    axisLabel: read(CHART_UI_VARS.axisLabel, FALLBACK_UI_TOKENS.axisLabel),\n    axisTitle: read(CHART_UI_VARS.axisTitle, FALLBACK_UI_TOKENS.axisTitle),\n    grid: read(CHART_UI_VARS.grid, FALLBACK_UI_TOKENS.grid),\n    tooltipBg: read(CHART_UI_VARS.tooltipBg, FALLBACK_UI_TOKENS.tooltipBg),\n  };\n\n  return uiTokenCache;\n}\n\n// ============================================================================\n// Theme Change Subscription (shared)\n// ============================================================================\n\n// One shared, ref-counted matchMedia + MutationObserver for the whole module: a\n// theme change clears the caches once, then notifies every subscribed hook.\nconst subscribers = new Set<() => void>();\nlet teardownListeners: (() => void) | null = null;\n\nfunction handleThemeChange(): void {\n  clearThemeCaches();\n  // Snapshot: a subscriber may add/remove itself during iteration.\n  for (const notify of [...subscribers]) notify();\n}\n\nfunction ensureListening(): void {\n  if (teardownListeners) return;\n\n  const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n  mediaQuery.addEventListener(\"change\", handleThemeChange);\n\n  const observer = new MutationObserver(handleThemeChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"data-mode\"],\n  });\n\n  teardownListeners = () => {\n    mediaQuery.removeEventListener(\"change\", handleThemeChange);\n    observer.disconnect();\n  };\n}\n\n/**\n * Resets all module-level theme state: clears both caches and drops the shared\n * subscription (removing the matchMedia/MutationObserver listeners). Used by\n * tests to isolate runs; the runtime only ever clears caches.\n * @internal\n */\nexport function resetThemeCache(): void {\n  clearThemeCaches();\n  subscribers.clear();\n  teardownListeners?.();\n  teardownListeners = null;\n}\n\n/**\n * Subscribes `onChange` to theme changes (system color scheme via matchMedia, or\n * a theme attribute on the root element). Listeners are shared and ref-counted,\n * so each hook subscribes once per mount regardless of how `onChange`'s identity\n * changes between renders.\n */\nfunction useThemeChangeEffect(onChange: () => void): void {\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  useEffect(() => {\n    const subscriber = () => onChangeRef.current();\n    subscribers.add(subscriber);\n    ensureListening();\n\n    return () => {\n      subscribers.delete(subscriber);\n      if (subscribers.size === 0 && teardownListeners) {\n        teardownListeners();\n        teardownListeners = null;\n      }\n    };\n  }, []);\n}\n\n// ============================================================================\n// Hooks\n// ============================================================================\n\n/**\n * Hook to get theme colors with automatic updates on theme change.\n * Re-resolves CSS variables when color scheme or theme attributes change.\n *\n * @param palette - Color palette type: \"categorical\" (default), \"sequential\", or \"diverging\"\n */\nexport function useThemeColors(\n  palette: ChartColorPalette = \"categorical\",\n): string[] {\n  const [colors, setColors] = useState<string[]>(() =>\n    typeof window === \"undefined\"\n      ? PALETTE_CONFIG[palette].fallback\n      : getThemeColors(palette),\n  );\n\n  // Re-resolve colors when the theme changes.\n  const updateColors = useCallback(() => {\n    setColors(getThemeColors(palette));\n  }, [palette]);\n\n  useThemeChangeEffect(updateColors);\n\n  return colors;\n}\n\n/**\n * Hook to get the chart UI tokens (axis text, titles, grid lines) with automatic\n * updates on theme change. Pass the result into the ECharts option builders so\n * axis labels, lines, legends, and titles follow the active theme.\n */\nexport function useChartUITokens(): ChartUITokens {\n  const [tokens, setTokens] = useState<ChartUITokens>(() =>\n    typeof window === \"undefined\" ? FALLBACK_UI_TOKENS : getThemeUITokens(),\n  );\n\n  // Re-resolve tokens when the theme changes.\n  const updateTokens = useCallback(() => {\n    setTokens(getThemeUITokens());\n  }, []);\n\n  useThemeChangeEffect(updateTokens);\n\n  return tokens;\n}\n\n/**\n * Hook to get all three color palettes at once.\n * Useful when a component needs access to multiple palette types.\n */\nexport function useAllThemeColors(): {\n  categorical: string[];\n  sequential: string[];\n  diverging: string[];\n} {\n  const categorical = useThemeColors(\"categorical\");\n  const sequential = useThemeColors(\"sequential\");\n  const diverging = useThemeColors(\"diverging\");\n\n  return { categorical, sequential, diverging };\n}\n"],"mappings":";;;;AAiBA,MAAM,iBAGF;CACF,aAAa;EACX,MAAM;EACN,UAAU;EACX;CACD,YAAY;EACV,MAAM;EACN,UAAU;EACX;CACD,WAAW;EACT,MAAM;EACN,UAAU;EACX;CACF;;;;;AAUD,MAAM,6BAAa,IAAI,KAAuB;;AAG9C,IAAI,eAAqC;;AAGzC,SAAS,mBAAyB;AAChC,YAAW,OAAO;AAClB,gBAAe;;;;;;AAOjB,SAAS,eAAe,UAA6B,eAAyB;CAC5E,MAAM,SAAS,eAAe;AAE9B,KAAI,OAAO,WAAW,YAAa,QAAO,OAAO;CAGjD,MAAM,SAAS,WAAW,IAAI,QAAQ;AACtC,KAAI,OACF,QAAO;CAIT,MAAM,SAAS,iBAAiB,SAAS,gBAAgB;CACzD,MAAM,SAAmB,EAAE;AAE3B,MAAK,MAAM,WAAW,OAAO,MAAM;EACjC,MAAM,QAAQ,OAAO,iBAAiB,QAAQ,CAAC,MAAM;AACrD,MAAI,MAAO,QAAO,KAAK,MAAM;;CAG/B,MAAM,SAAS,OAAO,SAAS,IAAI,SAAS,OAAO;AAGnD,YAAW,IAAI,SAAS,OAAO;AAE/B,QAAO;;;;;;;AAQT,SAAS,mBAAkC;AACzC,KAAI,OAAO,WAAW,YAAa,QAAO;AAE1C,KAAI,aAAc,QAAO;CAEzB,MAAM,SAAS,iBAAiB,SAAS,gBAAgB;CACzD,MAAM,QAAQ,SAAiB,aAA6B;AAE1D,SADc,OAAO,iBAAiB,QAAQ,CAAC,MAAM,IACrC;;AAGlB,gBAAe;EACb,WAAW,KAAK,cAAc,WAAW,mBAAmB,UAAU;EACtE,WAAW,KAAK,cAAc,WAAW,mBAAmB,UAAU;EACtE,MAAM,KAAK,cAAc,MAAM,mBAAmB,KAAK;EACvD,WAAW,KAAK,cAAc,WAAW,mBAAmB,UAAU;EACvE;AAED,QAAO;;AAST,MAAM,8BAAc,IAAI,KAAiB;AACzC,IAAI,oBAAyC;AAE7C,SAAS,oBAA0B;AACjC,mBAAkB;AAElB,MAAK,MAAM,UAAU,CAAC,GAAG,YAAY,CAAE,SAAQ;;AAGjD,SAAS,kBAAwB;AAC/B,KAAI,kBAAmB;CAEvB,MAAM,aAAa,OAAO,WAAW,+BAA+B;AACpE,YAAW,iBAAiB,UAAU,kBAAkB;CAExD,MAAM,WAAW,IAAI,iBAAiB,kBAAkB;AACxD,UAAS,QAAQ,SAAS,iBAAiB;EACzC,YAAY;EACZ,iBAAiB;GAAC;GAAS;GAAc;GAAY;EACtD,CAAC;AAEF,2BAA0B;AACxB,aAAW,oBAAoB,UAAU,kBAAkB;AAC3D,WAAS,YAAY;;;;;;;;;AAuBzB,SAAS,qBAAqB,UAA4B;CACxD,MAAM,cAAc,OAAO,SAAS;AACpC,aAAY,UAAU;AAEtB,iBAAgB;EACd,MAAM,mBAAmB,YAAY,SAAS;AAC9C,cAAY,IAAI,WAAW;AAC3B,mBAAiB;AAEjB,eAAa;AACX,eAAY,OAAO,WAAW;AAC9B,OAAI,YAAY,SAAS,KAAK,mBAAmB;AAC/C,uBAAmB;AACnB,wBAAoB;;;IAGvB,EAAE,CAAC;;;;;;;;AAaR,SAAgB,eACd,UAA6B,eACnB;CACV,MAAM,CAAC,QAAQ,aAAa,eAC1B,OAAO,WAAW,cACd,eAAe,SAAS,WACxB,eAAe,QAAQ,CAC5B;AAOD,sBAJqB,kBAAkB;AACrC,YAAU,eAAe,QAAQ,CAAC;IACjC,CAAC,QAAQ,CAAC,CAEqB;AAElC,QAAO;;;;;;;AAQT,SAAgB,mBAAkC;CAChD,MAAM,CAAC,QAAQ,aAAa,eAC1B,OAAO,WAAW,cAAc,qBAAqB,kBAAkB,CACxE;AAOD,sBAJqB,kBAAkB;AACrC,YAAU,kBAAkB,CAAC;IAC5B,EAAE,CAAC,CAE4B;AAElC,QAAO;;;;;;AAOT,SAAgB,oBAId;AAKA,QAAO;EAAE,aAJW,eAAe,cAAc;EAI3B,YAHH,eAAe,aAAa;EAGb,WAFhB,eAAe,YAAY;EAEA"}

package/dist/react/charts/types.d.ts

@@ -11,6 +11,17 @@ type ChartType = "bar" | "line" | "area" | "pie" | "donut" | "scatter" | "radar"
 type ChartData = Table | Record<string, unknown>[];
 /** Color palette types for different visualization needs */
 type ChartColorPalette = "categorical" | "sequential" | "diverging";
+/** Resolved colors for the chart UI — axis text, titles, grid lines, and tooltip. */
+interface ChartUITokens {
+  /** Axis tick labels (≈ `--muted-foreground`) */
+  axisLabel: string;
+  /** Axis names, legend, title, and visualMap text (≈ `--foreground`) */
+  axisTitle: string;
+  /** Axis, tick, and split (grid) lines (≈ `--border`) */
+  grid: string;
+  /** Tooltip popover background (≈ `--popover`) */
+  tooltipBg: string;
+}
 /** Common visual and behavior props for all charts */
 interface ChartBaseProps {
   /** Chart title */
@@ -156,5 +167,5 @@ declare function isQueryProps(props: UnifiedChartProps): props is QueryProps;
 /** Type guard to check if props are data-based */
 declare function isDataProps(props: UnifiedChartProps): props is DataProps;
 //#endregion
-export { 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 };
+export { AreaChartProps, AreaChartSpecificProps, BarChartProps, BarChartSpecificProps, ChartBaseProps, ChartColorPalette, ChartData, ChartType, ChartUITokens, DataFormat, DataProps, DonutChartProps, HeatmapChartProps, HeatmapChartSpecificProps, LineChartProps, LineChartSpecificProps, NormalizedChartData, NormalizedChartDataBase, Orientation, PieChartProps, PieChartSpecificProps, QueryProps, RadarChartProps, RadarChartSpecificProps, ScatterChartProps, ScatterChartSpecificProps, UnifiedChartProps, isArrowTable, isDataProps, isQueryProps };
 //# sourceMappingURL=types.d.ts.map

package/dist/react/charts/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/react/charts/types.ts"],"mappings":";;;;KAOY,UAAA;AAAZ;AAAA,KAGY,WAAA;;KAGA,SAAA;;KAWA,SAAA,GAAY,KAAA,GAAQ,MAAA;;KAOpB,iBAAA;;UAGK,cAAA;EArBL;EAuBV,KAAA;;EAEA,UAAA;EAzBmB;AAWrB;;;;;EAqBE,YAAA,GAAe,iBAAA;EAdY;EAgB3B,MAAA;EAhB2B;EAkB3B,MAAA;EAfe;EAiBf,SAAA;;EAGA,IAAA;EAlBA;EAoBA,IAAA;EAXA;EAcA,SAAA;EAZA;EAcA,MAAA;EAVA;EAaA,OAAA,GAAU,MAAA;AAAA;;UAQK,UAAA,SAAmB,cAAA;EARlC;EAUA,QAAA;EAVgB;EAYhB,UAAA,GAAa,MAAA;EAJE;;;;;;;EAYf,MAAA,GAAS,UAAA;EAZuC;EAchD,WAAA,OAAkB,IAAA,EAAM,CAAA,KAAM,CAAA;EAE9B,IAAA;AAAA;;UAQe,SAAA,SAAkB,cAAA;EAZjC;EAcA,IAAA,EAAM,SAAA;EAGN,QAAA;EACA,UAAA;EACA,MAAA;EACA,WAAA;AAAA;;KAQU,iBAAA,GAAoB,UAAA,GAAa,SAAA;;UAO5B,qBAAA;EAvBU;EAyBzB,WAAA,GAAc,WAAA;EAzBiC;EA2B/C,OAAA;AAAA;;UAIe,sBAAA;EAzBf;EA2BA,WAAA,GAAc,WAAA;EAzBd;EA2BA,UAAA;EA3BW;EA6BX,MAAA;AAAA;;UAIe,sBAAA;EAzBqC;EA2BpD,WAAA,GAAc,WAAA;EApBsB;EAsBpC,UAAA;EApByB;EAsBzB,MAAA;EAtBc;EAwBd,OAAA;AAAA;;UAIe,yBAAA;EAtBsB;EAwBrC,UAAA;AAAA;;UAIe,qBAAA;EAxBf;EA0BA,WAAA;EAxBM;EA0BN,UAAA;EAtBe;EAwBf,aAAA;AAAA;;UAIe,uBAAA;EA1BD;EA4Bd,QAAA;AAAA;;UAIe,yBAAA;EA1BR;AAIT;;;EA2BE,QAAA;EAzBU;EA2BV,GAAA;EAvBoC;EAyBpC,GAAA;EAzBoC;EA2BpC,UAAA;AAAA;AAAA,KAOU,aAAA,IAAiB,UAAA,GAAa,SAAA,IAAa,qBAAA;AAAA,KAC3C,cAAA,IAAkB,UAAA,GAAa,SAAA,IAAa,sBAAA;AAAA,KAC5C,cAAA,IAAkB,UAAA,GAAa,SAAA,IAAa,sBAAA;AAAA,KAC5C,iBAAA,IAAqB,UAAA,GAAa,SAAA,IAC5C,yBAAA;AAAA,KACU,aAAA,IAAiB,UAAA,GAAa,SAAA,IAAa,qBAAA;AAAA,KAC3C,eAAA,IAAmB,UAAA,GAAa,SAAA,IAAa,qBAAA;AAAA,KAC7C,eAAA,IAAmB,UAAA,GAAa,SAAA,IAC1C,uBAAA;AAAA,KACU,iBAAA,IAAqB,UAAA,GAAa,SAAA,IAC5C,yBAAA;AA5BF;AAAA,UAmCiB,uBAAA;EACf,KAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;AAAA;;UAIe,mBAAA,SAA4B,uBAAA;EAC3C,QAAA,EAAU,MAAA;AAAA;;iBAII,YAAA,CAAa,IAAA,EAAM,SAAA,GAAY,IAAA,IAAQ,KAAA;;iBAWvC,YAAA,CAAa,KAAA,EAAO,iBAAA,GAAoB,KAAA,IAAS,UAAA;;iBASjD,WAAA,CAAY,KAAA,EAAO,iBAAA,GAAoB,KAAA,IAAS,SAAA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/react/charts/types.ts"],"mappings":";;;;KAOY,UAAA;AAAZ;AAAA,KAGY,WAAA;;KAGA,SAAA;;KAWA,SAAA,GAAY,KAAA,GAAQ,MAAA;;KAOpB,iBAAA;;UAGK,aAAA;EArBL;EAuBV,SAAA;;EAEA,SAAA;EAzBmB;EA2BnB,IAAA;EAhBmB;EAkBnB,SAAA;AAAA;;UAIe,cAAA;EAfY;EAiB3B,KAAA;EAjB2B;EAmB3B,UAAA;EAhBe;;;;;;EAuBf,YAAA,GAAe,iBAAA;EAff;EAiBA,MAAA;EAjBS;EAmBT,MAAA;EAf6B;EAiB7B,SAAA;EAagB;EAVhB,IAAA;EAhBA;EAkBA,IAAA;EAXe;EAcf,SAAA;EAVA;EAYA,MAAA;EAPA;EAUA,OAAA,GAAU,MAAA;AAAA;;UAQK,UAAA,SAAmB,cAAA;EARxB;EAUV,QAAA;EAVgB;EAYhB,UAAA,GAAa,MAAA;EAJa;;;;;;;EAY1B,MAAA,GAAS,UAAA;EAZuC;EAchD,WAAA,OAAkB,IAAA,EAAM,CAAA,KAAM,CAAA;EAE9B,IAAA;AAAA;;UAQe,SAAA,SAAkB,cAAA;EAZxB;EAcT,IAAA,EAAM,SAAA;EAGN,QAAA;EACA,UAAA;EACA,MAAA;EACA,WAAA;AAAA;;KAQU,iBAAA,GAAoB,UAAA,GAAa,SAAA;AAhB7C;AAAA,UAuBiB,qBAAA;;EAEf,WAAA,GAAc,WAAA;EAzBmB;EA2BjC,OAAA;AAAA;;UAIe,sBAAA;EAxBf;EA0BA,WAAA,GAAc,WAAA;EAzBH;EA2BX,UAAA;EAnBU;EAqBV,MAAA;AAAA;;UAIe,sBAAA;EAlBA;EAoBf,WAAA,GAAc,WAAA;;EAEd,UAAA;EApBA;EAsBA,MAAA;EApBA;EAsBA,OAAA;AAAA;AAlBF;AAAA,UAsBiB,yBAAA;;EAEf,UAAA;AAAA;;UAIe,qBAAA;EAtBf;EAwBA,WAAA;EAxBM;EA0BN,UAAA;EAtBqC;EAwBrC,aAAA;AAAA;;UAIe,uBAAA;EAxBf;EA0BA,QAAA;AAAA;;UAIe,yBAAA;EAtBA;;;;EA2Bf,QAAA;EArBe;EAuBf,GAAA;;EAEA,GAAA;EAvBA;EAyBA,UAAA;AAAA;AAAA,KAOU,aAAA,IAAiB,UAAA,GAAa,SAAA,IAAa,qBAAA;AAAA,KAC3C,cAAA,IAAkB,UAAA,GAAa,SAAA,IAAa,sBAAA;AAAA,KAC5C,cAAA,IAAkB,UAAA,GAAa,SAAA,IAAa,sBAAA;AAAA,KAC5C,iBAAA,IAAqB,UAAA,GAAa,SAAA,IAC5C,yBAAA;AAAA,KACU,aAAA,IAAiB,UAAA,GAAa,SAAA,IAAa,qBAAA;AAAA,KAC3C,eAAA,IAAmB,UAAA,GAAa,SAAA,IAAa,qBAAA;AAAA,KAC7C,eAAA,IAAmB,UAAA,GAAa,SAAA,IAC1C,uBAAA;AAAA,KACU,iBAAA,IAAqB,UAAA,GAAa,SAAA,IAC5C,yBAAA;;UAOe,uBAAA;EACf,KAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;AAAA;;UAIe,mBAAA,SAA4B,uBAAA;EAC3C,QAAA,EAAU,MAAA;AAAA;;iBAII,YAAA,CAAa,IAAA,EAAM,SAAA,GAAY,IAAA,IAAQ,KAAA;;iBAWvC,YAAA,CAAa,KAAA,EAAO,iBAAA,GAAoB,KAAA,IAAS,UAAA;;iBASjD,WAAA,CAAY,KAAA,EAAO,iBAAA,GAAoB,KAAA,IAAS,SAAA"}

package/dist/react/charts/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/react/charts/types.ts"],"sourcesContent":["import type { Table } from \"apache-arrow\";\n\n// ============================================================================\n// Data Format Types\n// ============================================================================\n\n/** Supported data formats for analytics queries */\nexport type DataFormat = \"json\" | \"arrow\" | \"auto\";\n\n/** Chart orientation */\nexport type Orientation = \"vertical\" | \"horizontal\";\n\n/** Supported chart types */\nexport type ChartType =\n  | \"bar\"\n  | \"line\"\n  | \"area\"\n  | \"pie\"\n  | \"donut\"\n  | \"scatter\"\n  | \"radar\"\n  | \"heatmap\";\n\n/** Data that can be passed to unified charts */\nexport type ChartData = Table | Record<string, unknown>[];\n\n// ============================================================================\n// Base Props (shared by all charts)\n// ============================================================================\n\n/** Color palette types for different visualization needs */\nexport type ChartColorPalette = \"categorical\" | \"sequential\" | \"diverging\";\n\n/** Common visual and behavior props for all charts */\nexport interface ChartBaseProps {\n  /** Chart title */\n  title?: string;\n  /** Show legend */\n  showLegend?: boolean;\n  /**\n   * Color palette to use. Auto-selected based on chart type if not specified.\n   * - \"categorical\": Distinct colors for different categories (bar, pie, line)\n   * - \"sequential\": Gradient for magnitude/intensity (heatmap)\n   * - \"diverging\": Two-tone for positive/negative values\n   */\n  colorPalette?: ChartColorPalette;\n  /** Custom colors for series (overrides colorPalette) */\n  colors?: string[];\n  /** Chart height in pixels @default 300 */\n  height?: number;\n  /** Additional CSS classes */\n  className?: string;\n\n  /** X-axis field key. Auto-detected from schema if not provided. */\n  xKey?: string;\n  /** Y-axis field key(s). Auto-detected from schema if not provided. */\n  yKey?: string | string[];\n\n  /** Accessibility label for screen readers */\n  ariaLabel?: string;\n  /** Test ID for automated testing */\n  testId?: string;\n\n  /** Additional ECharts options to merge */\n  options?: Record<string, unknown>;\n}\n\n// ============================================================================\n// Query-based Props (chart fetches data)\n// ============================================================================\n\n/** Props for query-based data fetching */\nexport interface QueryProps extends ChartBaseProps {\n  /** Analytics query key registered with analytics plugin */\n  queryKey: string;\n  /** Query parameters passed to the analytics endpoint */\n  parameters?: Record<string, unknown>;\n  /**\n   * Data format to use\n   * - \"json\": Use JSON format (smaller payloads, simpler)\n   * - \"arrow\": Use Arrow format (faster for large datasets)\n   * - \"auto\": Automatically select based on expected data size\n   * @default \"auto\"\n   */\n  format?: DataFormat;\n  /** Transform raw data before rendering */\n  transformer?: <T>(data: T) => T;\n  // Discriminator: cannot use direct data with query\n  data?: never;\n}\n\n// ============================================================================\n// Data-based Props (chart receives data externally)\n// ============================================================================\n\n/** Props for direct data injection */\nexport interface DataProps extends ChartBaseProps {\n  /** Arrow Table or JSON array */\n  data: ChartData;\n\n  // Discriminator: cannot use query props with direct data\n  queryKey?: never;\n  parameters?: never;\n  format?: never;\n  transformer?: never;\n}\n\n// ============================================================================\n// Union Types for Each Chart\n// ============================================================================\n\n/** Base union type - either query-based or data-based */\nexport type UnifiedChartProps = QueryProps | DataProps;\n\n// ============================================================================\n// Chart-Specific Props\n// ============================================================================\n\n/** Props specific to bar charts */\nexport interface BarChartSpecificProps {\n  /** Chart orientation @default \"vertical\" */\n  orientation?: Orientation;\n  /** Stack bars */\n  stacked?: boolean;\n}\n\n/** Props specific to line charts */\nexport interface LineChartSpecificProps {\n  /** Chart orientation @default \"vertical\" */\n  orientation?: Orientation;\n  /** Show data point symbols @default false */\n  showSymbol?: boolean;\n  /** Smooth line curves @default true */\n  smooth?: boolean;\n}\n\n/** Props specific to area charts */\nexport interface AreaChartSpecificProps {\n  /** Chart orientation @default \"vertical\" */\n  orientation?: Orientation;\n  /** Show data point symbols @default false */\n  showSymbol?: boolean;\n  /** Smooth line curves @default true */\n  smooth?: boolean;\n  /** Stack areas @default false */\n  stacked?: boolean;\n}\n\n/** Props specific to scatter charts */\nexport interface ScatterChartSpecificProps {\n  /** Symbol size @default 8 */\n  symbolSize?: number;\n}\n\n/** Props specific to pie/donut charts */\nexport interface PieChartSpecificProps {\n  /** Inner radius for donut charts (0-100%) @default 0 */\n  innerRadius?: number;\n  /** Show labels on slices @default true */\n  showLabels?: boolean;\n  /** Label position @default \"outside\" */\n  labelPosition?: \"outside\" | \"inside\" | \"center\";\n}\n\n/** Props specific to radar charts */\nexport interface RadarChartSpecificProps {\n  /** Show area fill @default true */\n  showArea?: boolean;\n}\n\n/** Props specific to heatmap charts */\nexport interface HeatmapChartSpecificProps {\n  /**\n   * Field key for the Y-axis categories.\n   * For heatmaps, data should have: xKey (column), yAxisKey (row), and yKey (value).\n   */\n  yAxisKey?: string;\n  /** Min value for color scale (auto-detected if not provided) */\n  min?: number;\n  /** Max value for color scale (auto-detected if not provided) */\n  max?: number;\n  /** Show value labels on cells @default false */\n  showLabels?: boolean;\n}\n\n// ============================================================================\n// Complete Chart Props (union + specific)\n// ============================================================================\n\nexport type BarChartProps = (QueryProps | DataProps) & BarChartSpecificProps;\nexport type LineChartProps = (QueryProps | DataProps) & LineChartSpecificProps;\nexport type AreaChartProps = (QueryProps | DataProps) & AreaChartSpecificProps;\nexport type ScatterChartProps = (QueryProps | DataProps) &\n  ScatterChartSpecificProps;\nexport type PieChartProps = (QueryProps | DataProps) & PieChartSpecificProps;\nexport type DonutChartProps = (QueryProps | DataProps) & PieChartSpecificProps;\nexport type RadarChartProps = (QueryProps | DataProps) &\n  RadarChartSpecificProps;\nexport type HeatmapChartProps = (QueryProps | DataProps) &\n  HeatmapChartSpecificProps;\n\n// ============================================================================\n// Internal Types\n// ============================================================================\n\n/** Base normalized data shared by all chart types */\nexport interface NormalizedChartDataBase {\n  xData: (string | number)[];\n  xField: string;\n  yFields: string[];\n  chartType: \"timeseries\" | \"categorical\";\n}\n\n/** Normalized chart data for rendering (standard charts) */\nexport interface NormalizedChartData extends NormalizedChartDataBase {\n  yDataMap: Record<string, (string | number)[]>;\n}\n\n/** Type guard to check if data is an Arrow Table */\nexport function isArrowTable(data: ChartData): data is Table {\n  return (\n    data !== null &&\n    typeof data === \"object\" &&\n    \"schema\" in data &&\n    \"numRows\" in data &&\n    typeof (data as Table).getChild === \"function\"\n  );\n}\n\n/** Type guard to check if props are query-based */\nexport function isQueryProps(props: UnifiedChartProps): props is QueryProps {\n  return (\n    \"queryKey\" in props &&\n    typeof props.queryKey === \"string\" &&\n    props.queryKey.length > 0\n  );\n}\n\n/** Type guard to check if props are data-based */\nexport function isDataProps(props: UnifiedChartProps): props is DataProps {\n  return \"data\" in props && props.data != null;\n}\n"],"mappings":";;AA2NA,SAAgB,aAAa,MAAgC;AAC3D,QACE,SAAS,QACT,OAAO,SAAS,YAChB,YAAY,QACZ,aAAa,QACb,OAAQ,KAAe,aAAa;;;AAKxC,SAAgB,aAAa,OAA+C;AAC1E,QACE,cAAc,SACd,OAAO,MAAM,aAAa,YAC1B,MAAM,SAAS,SAAS;;;AAK5B,SAAgB,YAAY,OAA8C;AACxE,QAAO,UAAU,SAAS,MAAM,QAAQ"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/react/charts/types.ts"],"sourcesContent":["import type { Table } from \"apache-arrow\";\n\n// ============================================================================\n// Data Format Types\n// ============================================================================\n\n/** Supported data formats for analytics queries */\nexport type DataFormat = \"json\" | \"arrow\" | \"auto\";\n\n/** Chart orientation */\nexport type Orientation = \"vertical\" | \"horizontal\";\n\n/** Supported chart types */\nexport type ChartType =\n  | \"bar\"\n  | \"line\"\n  | \"area\"\n  | \"pie\"\n  | \"donut\"\n  | \"scatter\"\n  | \"radar\"\n  | \"heatmap\";\n\n/** Data that can be passed to unified charts */\nexport type ChartData = Table | Record<string, unknown>[];\n\n// ============================================================================\n// Base Props (shared by all charts)\n// ============================================================================\n\n/** Color palette types for different visualization needs */\nexport type ChartColorPalette = \"categorical\" | \"sequential\" | \"diverging\";\n\n/** Resolved colors for the chart UI — axis text, titles, grid lines, and tooltip. */\nexport interface ChartUITokens {\n  /** Axis tick labels (≈ `--muted-foreground`) */\n  axisLabel: string;\n  /** Axis names, legend, title, and visualMap text (≈ `--foreground`) */\n  axisTitle: string;\n  /** Axis, tick, and split (grid) lines (≈ `--border`) */\n  grid: string;\n  /** Tooltip popover background (≈ `--popover`) */\n  tooltipBg: string;\n}\n\n/** Common visual and behavior props for all charts */\nexport interface ChartBaseProps {\n  /** Chart title */\n  title?: string;\n  /** Show legend */\n  showLegend?: boolean;\n  /**\n   * Color palette to use. Auto-selected based on chart type if not specified.\n   * - \"categorical\": Distinct colors for different categories (bar, pie, line)\n   * - \"sequential\": Gradient for magnitude/intensity (heatmap)\n   * - \"diverging\": Two-tone for positive/negative values\n   */\n  colorPalette?: ChartColorPalette;\n  /** Custom colors for series (overrides colorPalette) */\n  colors?: string[];\n  /** Chart height in pixels @default 300 */\n  height?: number;\n  /** Additional CSS classes */\n  className?: string;\n\n  /** X-axis field key. Auto-detected from schema if not provided. */\n  xKey?: string;\n  /** Y-axis field key(s). Auto-detected from schema if not provided. */\n  yKey?: string | string[];\n\n  /** Accessibility label for screen readers */\n  ariaLabel?: string;\n  /** Test ID for automated testing */\n  testId?: string;\n\n  /** Additional ECharts options to merge */\n  options?: Record<string, unknown>;\n}\n\n// ============================================================================\n// Query-based Props (chart fetches data)\n// ============================================================================\n\n/** Props for query-based data fetching */\nexport interface QueryProps extends ChartBaseProps {\n  /** Analytics query key registered with analytics plugin */\n  queryKey: string;\n  /** Query parameters passed to the analytics endpoint */\n  parameters?: Record<string, unknown>;\n  /**\n   * Data format to use\n   * - \"json\": Use JSON format (smaller payloads, simpler)\n   * - \"arrow\": Use Arrow format (faster for large datasets)\n   * - \"auto\": Automatically select based on expected data size\n   * @default \"auto\"\n   */\n  format?: DataFormat;\n  /** Transform raw data before rendering */\n  transformer?: <T>(data: T) => T;\n  // Discriminator: cannot use direct data with query\n  data?: never;\n}\n\n// ============================================================================\n// Data-based Props (chart receives data externally)\n// ============================================================================\n\n/** Props for direct data injection */\nexport interface DataProps extends ChartBaseProps {\n  /** Arrow Table or JSON array */\n  data: ChartData;\n\n  // Discriminator: cannot use query props with direct data\n  queryKey?: never;\n  parameters?: never;\n  format?: never;\n  transformer?: never;\n}\n\n// ============================================================================\n// Union Types for Each Chart\n// ============================================================================\n\n/** Base union type - either query-based or data-based */\nexport type UnifiedChartProps = QueryProps | DataProps;\n\n// ============================================================================\n// Chart-Specific Props\n// ============================================================================\n\n/** Props specific to bar charts */\nexport interface BarChartSpecificProps {\n  /** Chart orientation @default \"vertical\" */\n  orientation?: Orientation;\n  /** Stack bars */\n  stacked?: boolean;\n}\n\n/** Props specific to line charts */\nexport interface LineChartSpecificProps {\n  /** Chart orientation @default \"vertical\" */\n  orientation?: Orientation;\n  /** Show data point symbols @default false */\n  showSymbol?: boolean;\n  /** Smooth line curves @default true */\n  smooth?: boolean;\n}\n\n/** Props specific to area charts */\nexport interface AreaChartSpecificProps {\n  /** Chart orientation @default \"vertical\" */\n  orientation?: Orientation;\n  /** Show data point symbols @default false */\n  showSymbol?: boolean;\n  /** Smooth line curves @default true */\n  smooth?: boolean;\n  /** Stack areas @default false */\n  stacked?: boolean;\n}\n\n/** Props specific to scatter charts */\nexport interface ScatterChartSpecificProps {\n  /** Symbol size @default 8 */\n  symbolSize?: number;\n}\n\n/** Props specific to pie/donut charts */\nexport interface PieChartSpecificProps {\n  /** Inner radius for donut charts (0-100%) @default 0 */\n  innerRadius?: number;\n  /** Show labels on slices @default true */\n  showLabels?: boolean;\n  /** Label position @default \"outside\" */\n  labelPosition?: \"outside\" | \"inside\" | \"center\";\n}\n\n/** Props specific to radar charts */\nexport interface RadarChartSpecificProps {\n  /** Show area fill @default true */\n  showArea?: boolean;\n}\n\n/** Props specific to heatmap charts */\nexport interface HeatmapChartSpecificProps {\n  /**\n   * Field key for the Y-axis categories.\n   * For heatmaps, data should have: xKey (column), yAxisKey (row), and yKey (value).\n   */\n  yAxisKey?: string;\n  /** Min value for color scale (auto-detected if not provided) */\n  min?: number;\n  /** Max value for color scale (auto-detected if not provided) */\n  max?: number;\n  /** Show value labels on cells @default false */\n  showLabels?: boolean;\n}\n\n// ============================================================================\n// Complete Chart Props (union + specific)\n// ============================================================================\n\nexport type BarChartProps = (QueryProps | DataProps) & BarChartSpecificProps;\nexport type LineChartProps = (QueryProps | DataProps) & LineChartSpecificProps;\nexport type AreaChartProps = (QueryProps | DataProps) & AreaChartSpecificProps;\nexport type ScatterChartProps = (QueryProps | DataProps) &\n  ScatterChartSpecificProps;\nexport type PieChartProps = (QueryProps | DataProps) & PieChartSpecificProps;\nexport type DonutChartProps = (QueryProps | DataProps) & PieChartSpecificProps;\nexport type RadarChartProps = (QueryProps | DataProps) &\n  RadarChartSpecificProps;\nexport type HeatmapChartProps = (QueryProps | DataProps) &\n  HeatmapChartSpecificProps;\n\n// ============================================================================\n// Internal Types\n// ============================================================================\n\n/** Base normalized data shared by all chart types */\nexport interface NormalizedChartDataBase {\n  xData: (string | number)[];\n  xField: string;\n  yFields: string[];\n  chartType: \"timeseries\" | \"categorical\";\n}\n\n/** Normalized chart data for rendering (standard charts) */\nexport interface NormalizedChartData extends NormalizedChartDataBase {\n  yDataMap: Record<string, (string | number)[]>;\n}\n\n/** Type guard to check if data is an Arrow Table */\nexport function isArrowTable(data: ChartData): data is Table {\n  return (\n    data !== null &&\n    typeof data === \"object\" &&\n    \"schema\" in data &&\n    \"numRows\" in data &&\n    typeof (data as Table).getChild === \"function\"\n  );\n}\n\n/** Type guard to check if props are query-based */\nexport function isQueryProps(props: UnifiedChartProps): props is QueryProps {\n  return (\n    \"queryKey\" in props &&\n    typeof props.queryKey === \"string\" &&\n    props.queryKey.length > 0\n  );\n}\n\n/** Type guard to check if props are data-based */\nexport function isDataProps(props: UnifiedChartProps): props is DataProps {\n  return \"data\" in props && props.data != null;\n}\n"],"mappings":";;AAuOA,SAAgB,aAAa,MAAgC;AAC3D,QACE,SAAS,QACT,OAAO,SAAS,YAChB,YAAY,QACZ,aAAa,QACb,OAAQ,KAAe,aAAa;;;AAKxC,SAAgB,aAAa,OAA+C;AAC1E,QACE,cAAc,SACd,OAAO,MAAM,aAAa,YAC1B,MAAM,SAAS,SAAS;;;AAK5B,SAAgB,YAAY,OAA8C;AACxE,QAAO,UAAU,SAAS,MAAM,QAAQ"}

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 import { GenieAttachmentResponse, GenieMessageResponse, GenieStatementResponse, GenieStreamEvent } from "../shared/src/genie.js";
 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 { AreaChartProps, AreaChartSpecificProps, BarChartProps, BarChartSpecificProps, ChartBaseProps, ChartColorPalette, ChartData, ChartType, ChartUITokens, 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";
@@ -16,7 +16,7 @@ import { LoadingSkeleton, ResourceWaitingPlaceholder } from "./charts/loading.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_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL } from "./charts/constants.js";
-import { useAllThemeColors, useThemeColors } from "./charts/theme.js";
+import { useAllThemeColors, useChartUITokens, 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 "./charts/index.js";
@@ -105,4 +105,4 @@ import { Textarea } from "./ui/textarea.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, AgentChatEvent, AggregatedResourceStatus, 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, ChartInference, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChartType, ChartWrapper, ChartWrapperProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColumnCategory, 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, DirectoryEntry, DirectoryList, DirectoryListProps, 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_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileBreadcrumbProps, FileBrowserLabels, FileEntry, FileEntryProps, FilePreview, FilePreviewPanel, FilePreviewPanelProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieAttachmentResponse, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieChatProps, GenieChatStatus, GenieColumnMeta, GenieMessageItem, GenieMessageResponse, GenieQueryVisualization, GenieStatementResponse, GenieStreamEvent, HeatmapChart, HeatmapChartProps, HeatmapChartSpecificProps, HeatmapContext, HoverCard, HoverCardContent, HoverCardTrigger, InferResultByFormat, InferRowType, InferServingChunk, InferServingRequest, InferServingResponse, 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, LoadingSkeleton, 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, NewFolderInput, NewFolderInputProps, NormalizedChartData, NormalizedChartDataBase, NormalizedHeatmapData, OptionBuilderContext, Orientation, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, PieChartProps, PieChartSpecificProps, PluginRegistry, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, QueryProps, QueryRegistry, RadarChart, RadarChartProps, RadarChartSpecificProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceKindRenderer, ResourceSeverity, ResourceStatus, ResourceStatusFilter, ResourceStatusIndicator, ResourceStatusIndicatorProps, ResourceStatusProvider, ResourceStatusProviderProps, ResourceStatusToasterOptions, ResourceWaitingPlaceholder, ScatterChart, ScatterChartProps, ScatterChartSpecificProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ServingAlias, ServingEndpointRegistry, 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, TERMINAL_STATUSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransformedGenieData, TypedArrowTable, UnifiedChartProps, UseAgentChatOptions, UseAgentChatResult, UseAnalyticsQueryOptions, UseAnalyticsQueryResult, UseChartDataOptions, UseChartDataResult, UseGenieChatOptions, UseGenieChatReturn, UseServingInvokeOptions, UseServingInvokeResult, UseServingStreamOptions, UseServingStreamResult, WarehouseState, WarehouseStatus, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentChatEvent, AggregatedResourceStatus, 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, ChartInference, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChartType, ChartUITokens, ChartWrapper, ChartWrapperProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColumnCategory, 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, DirectoryEntry, DirectoryList, DirectoryListProps, 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_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileBreadcrumbProps, FileBrowserLabels, FileEntry, FileEntryProps, FilePreview, FilePreviewPanel, FilePreviewPanelProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieAttachmentResponse, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieChatProps, GenieChatStatus, GenieColumnMeta, GenieMessageItem, GenieMessageResponse, GenieQueryVisualization, GenieStatementResponse, GenieStreamEvent, HeatmapChart, HeatmapChartProps, HeatmapChartSpecificProps, HeatmapContext, HoverCard, HoverCardContent, HoverCardTrigger, InferResultByFormat, InferRowType, InferServingChunk, InferServingRequest, InferServingResponse, 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, LoadingSkeleton, 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, NewFolderInput, NewFolderInputProps, NormalizedChartData, NormalizedChartDataBase, NormalizedHeatmapData, OptionBuilderContext, Orientation, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, PieChartProps, PieChartSpecificProps, PluginRegistry, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, QueryProps, QueryRegistry, RadarChart, RadarChartProps, RadarChartSpecificProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceKindRenderer, ResourceSeverity, ResourceStatus, ResourceStatusFilter, ResourceStatusIndicator, ResourceStatusIndicatorProps, ResourceStatusProvider, ResourceStatusProviderProps, ResourceStatusToasterOptions, ResourceWaitingPlaceholder, ScatterChart, ScatterChartProps, ScatterChartSpecificProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ServingAlias, ServingEndpointRegistry, 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, TERMINAL_STATUSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransformedGenieData, TypedArrowTable, UnifiedChartProps, UseAgentChatOptions, UseAgentChatResult, UseAnalyticsQueryOptions, UseAnalyticsQueryResult, UseChartDataOptions, UseChartDataResult, UseGenieChatOptions, UseGenieChatReturn, UseServingInvokeOptions, UseServingInvokeResult, UseServingStreamOptions, UseServingStreamResult, WarehouseState, WarehouseStatus, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useChartUITokens, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };

package/dist/react/index.js

@@ -4,7 +4,7 @@ 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 { useAllThemeColors, useChartUITokens, useThemeColors } from "./charts/theme.js";
 import { BaseChart } from "./charts/base.js";
 import { ResourceStatusProvider, useResourceStatus, useResourceStatusPublisher } from "./hooks/use-resource-status.js";
 import { useAnalyticsQuery } from "./hooks/use-analytics-query.js";
@@ -102,4 +102,4 @@ 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, DirectoryList, 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_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileEntry, FilePreviewPanel, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieQueryVisualization, 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, LoadingSkeleton, 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, NewFolderInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceStatusIndicator, ResourceStatusProvider, ResourceWaitingPlaceholder, 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, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };
+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, DirectoryList, 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_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileEntry, FilePreviewPanel, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieQueryVisualization, 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, LoadingSkeleton, 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, NewFolderInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceStatusIndicator, ResourceStatusProvider, ResourceWaitingPlaceholder, 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, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useChartUITokens, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };

package/dist/styles.css

@@ -4,6 +4,7 @@
 
 :root {
   --radius: 0.625rem;
+  color-scheme: light;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -67,6 +68,15 @@
   --chart-div-7: hsla(10, 72%, 50%, 1);
   --chart-div-8: hsla(10, 80%, 40%, 1); /* Strong positive */
 
+  /* ========================================
+     CHART UI TOKENS - axis labels, titles, grid lines, tooltip
+     ≈ muted-foreground / foreground / border / popover (hsla so ECharts can parse)
+     ======================================== */
+  --chart-axis-label: hsla(240, 4%, 46%, 1);
+  --chart-axis-title: hsla(240, 6%, 10%, 1);
+  --chart-grid: hsla(240, 5%, 90%, 1);
+  --chart-tooltip-bg: hsla(0, 0%, 100%, 1);
+
   /* Legacy aliases (for backwards compatibility) */
   --chart-1: var(--chart-cat-1);
   --chart-2: var(--chart-cat-2);
@@ -88,6 +98,7 @@
 
 /* Dark theme via class (takes precedence over media query) */
 .dark {
+  color-scheme: dark;
   --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.21 0.006 285.885);
@@ -111,11 +122,47 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
+  /* CATEGORICAL */
+  --chart-cat-1: hsla(217, 91%, 65%, 1); /* Blue */
+  --chart-cat-2: hsla(160, 65%, 55%, 1); /* Teal */
+  --chart-cat-3: hsla(291, 60%, 65%, 1); /* Purple */
+  --chart-cat-4: hsla(38, 95%, 60%, 1); /* Amber */
+  --chart-cat-5: hsla(349, 80%, 62%, 1); /* Rose */
+  --chart-cat-6: hsla(189, 85%, 52%, 1); /* Cyan */
+  --chart-cat-7: hsla(271, 65%, 70%, 1); /* Lavender */
+  --chart-cat-8: hsla(142, 60%, 55%, 1); /* Emerald */
+  /* SEQUENTIAL (inverted for dark mode) */
+  --chart-seq-1: hsla(217, 50%, 25%, 1);
+  --chart-seq-2: hsla(217, 55%, 35%, 1);
+  --chart-seq-3: hsla(217, 60%, 45%, 1);
+  --chart-seq-4: hsla(217, 65%, 55%, 1);
+  --chart-seq-5: hsla(217, 70%, 62%, 1);
+  --chart-seq-6: hsla(217, 75%, 70%, 1);
+  --chart-seq-7: hsla(217, 80%, 78%, 1);
+  --chart-seq-8: hsla(217, 85%, 88%, 1);
+  /* DIVERGING */
+  --chart-div-1: hsla(217, 85%, 70%, 1);
+  --chart-div-2: hsla(217, 70%, 60%, 1);
+  --chart-div-3: hsla(217, 50%, 50%, 1);
+  --chart-div-4: hsla(217, 25%, 40%, 1);
+  --chart-div-5: hsla(10, 25%, 40%, 1);
+  --chart-div-6: hsla(10, 55%, 50%, 1);
+  --chart-div-7: hsla(10, 70%, 58%, 1);
+  --chart-div-8: hsla(10, 80%, 65%, 1);
+  /* Legacy aliases */
+  --chart-1: var(--chart-cat-1);
+  --chart-2: var(--chart-cat-2);
+  --chart-3: var(--chart-cat-3);
+  --chart-4: var(--chart-cat-4);
+  --chart-5: var(--chart-cat-5);
+  --chart-6: var(--chart-cat-6);
+  --chart-7: var(--chart-cat-7);
+  --chart-8: var(--chart-cat-8);
+  /* Chart UI tokens (≈ muted-foreground / foreground / border / popover, hsla for ECharts) */
+  --chart-axis-label: hsla(240, 5%, 65%, 1);
+  --chart-axis-title: hsla(0, 0%, 98%, 1);
+  --chart-grid: hsla(0, 0%, 100%, 0.1);
+  --chart-tooltip-bg: hsla(240, 6%, 13%, 1);
   --sidebar: oklch(0.21 0.006 285.885);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
@@ -129,6 +176,7 @@
 /* Dark theme via media query (fallback when no class is set) */
 @media (prefers-color-scheme: dark) {
   :root:not(.light) {
+    color-scheme: dark;
     --background: oklch(0.141 0.005 285.823);
     --foreground: oklch(0.985 0 0);
     --card: oklch(0.21 0.006 285.885);
@@ -193,6 +241,12 @@
     --chart-div-7: hsla(10, 70%, 58%, 1);
     --chart-div-8: hsla(10, 80%, 65%, 1); /* Strong positive (red) */
 
+    /* Chart UI tokens (≈ muted-foreground / foreground / border / popover, hsla for ECharts) */
+    --chart-axis-label: hsla(240, 5%, 65%, 1);
+    --chart-axis-title: hsla(0, 0%, 98%, 1);
+    --chart-grid: hsla(0, 0%, 100%, 0.1);
+    --chart-tooltip-bg: hsla(240, 6%, 13%, 1);
+
     /* Legacy aliases */
     --chart-1: var(--chart-cat-1);
     --chart-2: var(--chart-cat-2);
@@ -276,6 +330,12 @@
   --color-chart-div-6: var(--chart-div-6);
   --color-chart-div-7: var(--chart-div-7);
   --color-chart-div-8: var(--chart-div-8);
+
+  /* Chart UI tokens */
+  --color-chart-axis-label: var(--chart-axis-label);
+  --color-chart-axis-title: var(--chart-axis-title);
+  --color-chart-grid: var(--chart-grid);
+  --color-chart-tooltip-bg: var(--chart-tooltip-bg);
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);

package/docs/development/type-generation.md

@@ -96,6 +96,10 @@ The type generator:
 4. Generates TypeScript interfaces for query parameters and results
 5. Creates a `QueryRegistry` type for type-safe query execution
 
+### Parameters during `DESCRIBE QUERY`[​](#parameters-during-describe-query "Direct link to parameters-during-describe-query")
+
+Type generation describes each query without binding real parameters, so it substitutes a placeholder default for every `:param` (e.g. `''` for a string). That breaks queries whose shape depends on a value — most notably dynamic table names via `IDENTIFIER(:catalog || '.schema.table')`. Annotate such parameters with a sample value (`-- @param catalog STRING = main`) so the describe call can resolve a real table. The sample value is used only at type-generation time; the runtime query still binds the actual parameter. See [SQL parameters → Sample values](./docs/plugins/analytics.md#sample-values-for-type-generation).
+
 ## Using generated types[​](#using-generated-types "Direct link to Using generated types")
 
 Once types are generated, your IDE will provide autocomplete and type checking:

package/docs/plugins/analytics.md

@@ -56,6 +56,21 @@ LIMIT :limit
 * `FLOAT`, `DOUBLE` — bind via `sql.float()` / `sql.double()`
 * `NUMERIC`, `DECIMAL` — bind via `sql.numeric()` (pass strings for precision)
 
+### Sample values for type generation[​](#sample-values-for-type-generation "Direct link to Sample values for type generation")
+
+Some queries only have a valid shape once a parameter has a concrete value — most commonly a dynamic table name built with `IDENTIFIER()`. During type generation AppKit runs `DESCRIBE QUERY` with placeholder defaults, so an unresolved parameter collapses to an empty string and produces invalid SQL (`IDENTIFIER('' || '.schema.table')` → `PARSE_SYNTAX_ERROR`).
+
+Append `= value` to a `-- @param` annotation to give type generation a sample value. It is used **only** while describing the query; at runtime the real parameter is still bound, so the query stays portable across environments:
+
+```sql
+-- @param target_catalog STRING = main
+SELECT *
+FROM IDENTIFIER(:target_catalog || '.sales.nation')
+
+```
+
+Type generation describes `main.sales.nation` to infer the result columns, while the deployed app binds whatever catalog the caller passes. String, `DATE`, and `TIMESTAMP` values are quoted automatically (`= main` → `'main'`), and an already-quoted literal is kept as-is (`= '2024-01-01'`). Numeric, `BOOLEAN`, and `BINARY` values are validated against a strict literal shape (`= 100`, `= true`, `= X'00'`); a value that doesn't match — anything that could otherwise inject SQL into the describe statement — is ignored and the parameter falls back to its type-based placeholder, so a sample value can never break out of the `DESCRIBE QUERY`.
+
 ## Server-injected parameters[​](#server-injected-parameters "Direct link to Server-injected parameters")
 
 `:workspaceId` is **injected by the server** and **must not** be annotated:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@databricks/appkit-ui",
   "type": "module",
-  "version": "0.41.4",
+  "version": "0.41.6",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",