@rebasepro/plugin-insights 0.5.0 → 0.6.0

package/dist/index.es.js

@@ -1,1098 +1,609 @@
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { c } from "react-compiler-runtime";
-import React, { createContext, useContext, useState, useEffect, useRef } from "react";
-import { useAuthController, getIcon } from "@rebasepro/core";
+import { getIcon, useAuthController } from "@rebasepro/core";
 import { cls, defaultBorderMixin } from "@rebasepro/ui";
-class InsightsCache {
-  constructor(ttl = 6e4) {
-    this.ttl = ttl;
-  }
-  ttl;
-  cache = /* @__PURE__ */ new Map();
-  inflight = /* @__PURE__ */ new Map();
-  get(key) {
-    const entry = this.cache.get(key);
-    if (!entry) return null;
-    if (Date.now() - entry.timestamp > this.ttl) {
-      this.cache.delete(key);
-      return null;
-    }
-    return entry.data;
-  }
-  set(key, data) {
-    this.cache.set(key, {
-      data,
-      timestamp: Date.now()
-    });
-    this.inflight.delete(key);
-  }
-  getInflight(key) {
-    return this.inflight.get(key) ?? null;
-  }
-  setInflight(key, promise) {
-    this.inflight.set(key, promise);
-  }
-  invalidate(key) {
-    if (key) {
-      this.cache.delete(key);
-      this.inflight.delete(key);
-    } else {
-      this.cache.clear();
-      this.inflight.clear();
-    }
-  }
-}
-const InsightsContext = createContext(null);
-function InsightsProvider(t0) {
-  const $ = c(7);
-  const {
-    cacheTTL,
-    children
-  } = t0;
-  let t1;
-  let t2;
-  if ($[0] !== cacheTTL) {
-    t2 = new InsightsCache(cacheTTL);
-    $[0] = cacheTTL;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  t1 = t2;
-  const cache = t1;
-  let t3;
-  let t4;
-  if ($[2] !== cache) {
-    t4 = {
-      cache
-    };
-    $[2] = cache;
-    $[3] = t4;
-  } else {
-    t4 = $[3];
-  }
-  t3 = t4;
-  const value = t3;
-  let t5;
-  if ($[4] !== children || $[5] !== value) {
-    t5 = /* @__PURE__ */ jsx(InsightsContext.Provider, { value, children });
-    $[4] = children;
-    $[5] = value;
-    $[6] = t5;
-  } else {
-    t5 = $[6];
-  }
-  return t5;
+//#region src/engine/InsightsCache.ts
+/**
+* In-memory cache for insight query results.
+* Supports TTL-based expiry and inflight request deduplication
+* to prevent redundant network requests when multiple widgets
+* share the same query.
+*/
+var InsightsCache = class {
+	ttl;
+	cache = /* @__PURE__ */ new Map();
+	inflight = /* @__PURE__ */ new Map();
+	constructor(ttl = 6e4) {
+		this.ttl = ttl;
+	}
+	get(key) {
+		const entry = this.cache.get(key);
+		if (!entry) return null;
+		if (Date.now() - entry.timestamp > this.ttl) {
+			this.cache.delete(key);
+			return null;
+		}
+		return entry.data;
+	}
+	set(key, data) {
+		this.cache.set(key, {
+			data,
+			timestamp: Date.now()
+		});
+		this.inflight.delete(key);
+	}
+	getInflight(key) {
+		return this.inflight.get(key) ?? null;
+	}
+	setInflight(key, promise) {
+		this.inflight.set(key, promise);
+	}
+	invalidate(key) {
+		if (key) {
+			this.cache.delete(key);
+			this.inflight.delete(key);
+		} else {
+			this.cache.clear();
+			this.inflight.clear();
+		}
+	}
+};
+//#endregion
+//#region src/engine/InsightsProvider.tsx
+var InsightsContext = createContext(null);
+/**
+* Root-level provider for the insights data engine.
+* Injected automatically by the plugin via `providers: [{ scope: "root" }]`.
+*
+* Manages a single `InsightsCache` instance shared by all insight widgets
+* for TTL-based caching and inflight request deduplication.
+*/
+function InsightsProvider({ cacheTTL, children }) {
+	const cache = useMemo(() => new InsightsCache(cacheTTL), [cacheTTL]);
+	const value = useMemo(() => ({ cache }), [cache]);
+	return /* @__PURE__ */ jsx(InsightsContext.Provider, {
+		value,
+		children
+	});
 }
+/**
+* Access the insights cache (for advanced usage).
+* Returns null when called outside of an `InsightsProvider`
+* (e.g. during auth-loading phase before plugin providers mount).
+*/
 function useInsightsEngine() {
-  return useContext(InsightsContext);
+	return useContext(InsightsContext);
 }
+//#endregion
+//#region src/engine/useInsightsData.ts
+/**
+* Hook that fetches and caches data for a single insight definition.
+*
+* Calls the definition's own `data()` callback and manages:
+* - TTL-based caching via InsightsCache
+* - Inflight request deduplication (multiple mounts of the same widget)
+* - Loading and error state management
+*
+* @param definition - The insight to fetch data for
+* @param collectionSlug - Optional collection context for cache key scoping
+*/
 function useInsightsData(definition, context) {
-  const $ = c(18);
-  const engine = useInsightsEngine();
-  const cache = engine?.cache ?? null;
-  const {
-    initialLoading,
-    authLoading,
-    user,
-    loginSkipped
-  } = useAuthController();
-  const authReady = !initialLoading && !authLoading && (Boolean(user) || loginSkipped);
-  const [data, setData] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const cacheKey = `${definition.id}:${context.path ?? context.collectionSlug ?? "global"}`;
-  let t0;
-  if ($[0] !== authReady || $[1] !== cache || $[2] !== cacheKey || $[3] !== context || $[4] !== definition) {
-    t0 = () => {
-      if (!authReady || !cache) {
-        return;
-      }
-      let cancelled;
-      cancelled = false;
-      const cached = cache.get(cacheKey);
-      if (cached) {
-        setData(cached);
-        setLoading(false);
-        return;
-      }
-      const inflight = cache.getInflight(cacheKey);
-      if (inflight) {
-        setLoading(true);
-        inflight.then((result) => {
-          if (!cancelled) {
-            setData(result);
-          }
-        }).catch((err) => {
-          if (!cancelled) {
-            setError(err instanceof Error ? err : new Error(String(err)));
-          }
-        }).finally(() => {
-          if (!cancelled) {
-            setLoading(false);
-          }
-        });
-        return;
-      }
-      setLoading(true);
-      setError(null);
-      const promise = definition.data(context);
-      cache.setInflight(cacheKey, promise);
-      promise.then((result_0) => {
-        cache.set(cacheKey, result_0);
-        if (!cancelled) {
-          setData(result_0);
-        }
-      }).catch((err_0) => {
-        cache.invalidate(cacheKey);
-        if (!cancelled) {
-          setError(err_0 instanceof Error ? err_0 : new Error(String(err_0)));
-        }
-      }).finally(() => {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      });
-      return () => {
-        cancelled = true;
-      };
-    };
-    $[0] = authReady;
-    $[1] = cache;
-    $[2] = cacheKey;
-    $[3] = context;
-    $[4] = definition;
-    $[5] = t0;
-  } else {
-    t0 = $[5];
-  }
-  let t1;
-  if ($[6] !== authReady || $[7] !== cache || $[8] !== cacheKey || $[9] !== context.collectionSlug || $[10] !== context.path || $[11] !== definition.data || $[12] !== definition.id) {
-    t1 = [definition.id, definition.data, context.path, context.collectionSlug, cacheKey, cache, authReady];
-    $[6] = authReady;
-    $[7] = cache;
-    $[8] = cacheKey;
-    $[9] = context.collectionSlug;
-    $[10] = context.path;
-    $[11] = definition.data;
-    $[12] = definition.id;
-    $[13] = t1;
-  } else {
-    t1 = $[13];
-  }
-  useEffect(t0, t1);
-  let t2;
-  if ($[14] !== data || $[15] !== error || $[16] !== loading) {
-    t2 = {
-      data,
-      loading,
-      error
-    };
-    $[14] = data;
-    $[15] = error;
-    $[16] = loading;
-    $[17] = t2;
-  } else {
-    t2 = $[17];
-  }
-  return t2;
+	const cache = useInsightsEngine()?.cache ?? null;
+	const { initialLoading, authLoading, user, loginSkipped } = useAuthController();
+	const authReady = !initialLoading && !authLoading && (Boolean(user) || loginSkipped);
+	const [data, setData] = useState(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const cacheKey = `${definition.id}:${context.path ?? context.collectionSlug ?? "global"}`;
+	useEffect(() => {
+		if (!authReady || !cache) return;
+		let cancelled = false;
+		const cached = cache.get(cacheKey);
+		if (cached) {
+			setData(cached);
+			setLoading(false);
+			return;
+		}
+		const inflight = cache.getInflight(cacheKey);
+		if (inflight) {
+			setLoading(true);
+			inflight.then((result) => {
+				if (!cancelled) setData(result);
+			}).catch((err) => {
+				if (!cancelled) setError(err instanceof Error ? err : new Error(String(err)));
+			}).finally(() => {
+				if (!cancelled) setLoading(false);
+			});
+			return;
+		}
+		setLoading(true);
+		setError(null);
+		const promise = definition.data(context);
+		cache.setInflight(cacheKey, promise);
+		promise.then((result) => {
+			cache.set(cacheKey, result);
+			if (!cancelled) setData(result);
+		}).catch((err) => {
+			cache.invalidate(cacheKey);
+			if (!cancelled) setError(err instanceof Error ? err : new Error(String(err)));
+		}).finally(() => {
+			if (!cancelled) setLoading(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		definition.id,
+		definition.data,
+		context.path,
+		context.collectionSlug,
+		cacheKey,
+		cache,
+		authReady
+	]);
+	return {
+		data,
+		loading,
+		error
+	};
 }
+//#endregion
+//#region src/components/InsightsScorecardView.tsx
 function formatNumber(value, format) {
-  if (value === null || value === void 0) return "N/A";
-  const options = {
-    style: format?.style ?? "decimal",
-    notation: format?.notation ?? "standard",
-    maximumFractionDigits: format?.decimals ?? 1,
-    minimumFractionDigits: format?.decimals ?? 1
-  };
-  if (format?.style === "currency") {
-    options.currency = format.currency ?? "USD";
-  }
-  let formatted = new Intl.NumberFormat("en-US", options).format(value);
-  if (format?.showSign && value > 0) {
-    formatted = "+" + formatted;
-  }
-  return formatted;
+	if (value === null || value === void 0) return "N/A";
+	const options = {
+		style: format?.style ?? "decimal",
+		notation: format?.notation ?? "standard",
+		maximumFractionDigits: format?.decimals ?? 1,
+		minimumFractionDigits: format?.decimals ?? 1
+	};
+	if (format?.style === "currency") options.currency = format.currency ?? "USD";
+	let formatted = new Intl.NumberFormat("en-US", options).format(value);
+	if (format?.showSign && value > 0) formatted = "+" + formatted;
+	return formatted;
 }
-function InsightsScorecardView(t0) {
-  const $ = c(59);
-  const {
-    config,
-    data,
-    title,
-    compact: t1,
-    embedded: t2,
-    fixedHeight
-  } = t0;
-  const compact = t1 === void 0 ? false : t1;
-  const embedded = t2 === void 0 ? false : t2;
-  const containerRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(null);
-  let t3;
-  let t4;
-  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t3 = () => {
-      if (!containerRef.current) {
-        return;
-      }
-      setContainerWidth(containerRef.current.offsetWidth);
-      const observer = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          setContainerWidth(entry.contentRect.width);
-        }
-      });
-      observer.observe(containerRef.current);
-      return () => observer.disconnect();
-    };
-    t4 = [];
-    $[0] = t3;
-    $[1] = t4;
-  } else {
-    t3 = $[0];
-    t4 = $[1];
-  }
-  React.useLayoutEffect(t3, t4);
-  const mainValue = data[config.value.field];
-  let t5;
-  if ($[2] !== config.value.format || $[3] !== mainValue) {
-    t5 = typeof mainValue === "number" ? formatNumber(mainValue, config.value.format) : String(mainValue ?? "N/A");
-    $[2] = config.value.format;
-    $[3] = mainValue;
-    $[4] = t5;
-  } else {
-    t5 = $[4];
-  }
-  const formattedValue = t5;
-  let comparisonElement = null;
-  if (config.comparison) {
-    const comparisonValue = data[config.comparison.field];
-    if (typeof comparisonValue === "number") {
-      let t62;
-      if ($[5] !== comparisonValue || $[6] !== config.comparison.format) {
-        t62 = formatNumber(comparisonValue, config.comparison.format);
-        $[5] = comparisonValue;
-        $[6] = config.comparison.format;
-        $[7] = t62;
-      } else {
-        t62 = $[7];
-      }
-      const formattedComparison = t62;
-      const isPositive = comparisonValue > 0;
-      const isNegative = comparisonValue < 0;
-      let colorClass = "text-surface-500 dark:text-surface-400";
-      if (config.comparison.intent === "increase_is_good") {
-        if (isPositive) {
-          colorClass = "text-emerald-500";
-        }
-        if (isNegative) {
-          colorClass = "text-red-500";
-        }
-      } else {
-        if (config.comparison.intent === "decrease_is_good") {
-          if (isPositive) {
-            colorClass = "text-red-500";
-          }
-          if (isNegative) {
-            colorClass = "text-emerald-500";
-          }
-        }
-      }
-      const t72 = `font-medium ${compact ? "text-[10px]" : "text-xs"} ${colorClass}`;
-      let t82;
-      if ($[8] !== formattedComparison || $[9] !== t72) {
-        t82 = /* @__PURE__ */ jsx("span", { className: t72, children: formattedComparison });
-        $[8] = formattedComparison;
-        $[9] = t72;
-        $[10] = t82;
-      } else {
-        t82 = $[10];
-      }
-      comparisonElement = t82;
-    }
-  }
-  const isSmall = compact || containerWidth !== null && containerWidth < 200;
-  let t6;
-  if ($[11] !== config.icon || $[12] !== isSmall) {
-    t6 = config.icon ? getIcon(config.icon, "text-surface-400 dark:text-surface-500", void 0, isSmall ? 14 : 18) : null;
-    $[11] = config.icon;
-    $[12] = isSmall;
-    $[13] = t6;
-  } else {
-    t6 = $[13];
-  }
-  const iconElement = t6;
-  if (compact) {
-    let t72;
-    if ($[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t72 = cls("flex flex-col gap-0.5 px-2.5 py-2 rounded-md bg-transparent border min-w-0", defaultBorderMixin);
-      $[14] = t72;
-    } else {
-      t72 = $[14];
-    }
-    let t82;
-    if ($[15] !== title) {
-      t82 = /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-surface-400 dark:text-surface-500 truncate", children: title });
-      $[15] = title;
-      $[16] = t82;
-    } else {
-      t82 = $[16];
-    }
-    let t92;
-    if ($[17] !== formattedValue) {
-      t92 = /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tabular-nums text-surface-800 dark:text-surface-100", children: formattedValue });
-      $[17] = formattedValue;
-      $[18] = t92;
-    } else {
-      t92 = $[18];
-    }
-    let t102;
-    if ($[19] !== comparisonElement || $[20] !== t92) {
-      t102 = /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
-        t92,
-        comparisonElement
-      ] });
-      $[19] = comparisonElement;
-      $[20] = t92;
-      $[21] = t102;
-    } else {
-      t102 = $[21];
-    }
-    let t112;
-    if ($[22] !== t102 || $[23] !== t82) {
-      t112 = /* @__PURE__ */ jsxs("div", { className: t72, children: [
-        t82,
-        t102
-      ] });
-      $[22] = t102;
-      $[23] = t82;
-      $[24] = t112;
-    } else {
-      t112 = $[24];
-    }
-    return t112;
-  }
-  let t7;
-  if ($[25] !== embedded || $[26] !== isSmall) {
-    t7 = embedded ? `flex flex-col min-w-0 h-full ${isSmall ? "px-3.5 py-3" : "px-5 py-4"}` : cls("rounded-lg flex flex-col min-w-0 bg-transparent border", defaultBorderMixin, isSmall ? "px-3.5 py-3" : "px-5 py-4");
-    $[25] = embedded;
-    $[26] = isSmall;
-    $[27] = t7;
-  } else {
-    t7 = $[27];
-  }
-  const baseClass = t7;
-  let t8;
-  if ($[28] !== embedded || $[29] !== fixedHeight || $[30] !== isSmall) {
-    t8 = embedded ? void 0 : fixedHeight ? {
-      height: fixedHeight
-    } : {
-      minHeight: isSmall ? 68 : 92
-    };
-    $[28] = embedded;
-    $[29] = fixedHeight;
-    $[30] = isSmall;
-    $[31] = t8;
-  } else {
-    t8 = $[31];
-  }
-  const t9 = `flex items-center justify-between ${isSmall ? "mb-1" : "mb-2"}`;
-  const t10 = `font-medium leading-snug truncate text-surface-500 dark:text-surface-400 ${isSmall ? "text-[11px]" : "text-xs"}`;
-  let t11;
-  if ($[32] !== t10 || $[33] !== title) {
-    t11 = /* @__PURE__ */ jsx("span", { className: t10, children: title });
-    $[32] = t10;
-    $[33] = title;
-    $[34] = t11;
-  } else {
-    t11 = $[34];
-  }
-  let t12;
-  if ($[35] !== config.dateRange || $[36] !== isSmall) {
-    t12 = config.dateRange && !isSmall && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-surface-400 dark:text-surface-500 truncate mt-0.5", children: config.dateRange });
-    $[35] = config.dateRange;
-    $[36] = isSmall;
-    $[37] = t12;
-  } else {
-    t12 = $[37];
-  }
-  let t13;
-  if ($[38] !== t11 || $[39] !== t12) {
-    t13 = /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-      t11,
-      t12
-    ] });
-    $[38] = t11;
-    $[39] = t12;
-    $[40] = t13;
-  } else {
-    t13 = $[40];
-  }
-  let t14;
-  if ($[41] !== iconElement) {
-    t14 = iconElement && /* @__PURE__ */ jsx("span", { className: "ml-2 shrink-0", children: iconElement });
-    $[41] = iconElement;
-    $[42] = t14;
-  } else {
-    t14 = $[42];
-  }
-  let t15;
-  if ($[43] !== t13 || $[44] !== t14 || $[45] !== t9) {
-    t15 = /* @__PURE__ */ jsxs("div", { className: t9, children: [
-      t13,
-      t14
-    ] });
-    $[43] = t13;
-    $[44] = t14;
-    $[45] = t9;
-    $[46] = t15;
-  } else {
-    t15 = $[46];
-  }
-  const t16 = `font-semibold leading-tight tracking-tight break-all text-surface-800 dark:text-surface-100 ${isSmall ? "text-lg" : containerWidth !== null && containerWidth < 300 ? "text-xl" : "text-2xl"}`;
-  let t17;
-  if ($[47] !== formattedValue || $[48] !== t16) {
-    t17 = /* @__PURE__ */ jsx("div", { className: t16, children: formattedValue });
-    $[47] = formattedValue;
-    $[48] = t16;
-    $[49] = t17;
-  } else {
-    t17 = $[49];
-  }
-  let t18;
-  if ($[50] !== comparisonElement || $[51] !== isSmall) {
-    t18 = comparisonElement && /* @__PURE__ */ jsx("div", { className: isSmall ? "mt-0.5" : "mt-1", children: comparisonElement });
-    $[50] = comparisonElement;
-    $[51] = isSmall;
-    $[52] = t18;
-  } else {
-    t18 = $[52];
-  }
-  let t19;
-  if ($[53] !== baseClass || $[54] !== t15 || $[55] !== t17 || $[56] !== t18 || $[57] !== t8) {
-    t19 = /* @__PURE__ */ jsxs("div", { ref: containerRef, className: baseClass, style: t8, children: [
-      t15,
-      t17,
-      t18
-    ] });
-    $[53] = baseClass;
-    $[54] = t15;
-    $[55] = t17;
-    $[56] = t18;
-    $[57] = t8;
-    $[58] = t19;
-  } else {
-    t19 = $[58];
-  }
-  return t19;
+/**
+* Scorecard widget for the Rebase design system.
+*
+* Renders a single KPI metric with optional comparison value and icon.
+* Uses Tailwind `dark:` classes — no JS dark mode detection.
+* Icons are resolved via `getIcon` from `@rebasepro/core`.
+*/
+function InsightsScorecardView({ config, data, title, compact = false, embedded = false, fixedHeight }) {
+	const containerRef = useRef(null);
+	const [containerWidth, setContainerWidth] = useState(null);
+	React.useLayoutEffect(() => {
+		if (!containerRef.current) return;
+		setContainerWidth(containerRef.current.offsetWidth);
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) setContainerWidth(entry.contentRect.width);
+		});
+		observer.observe(containerRef.current);
+		return () => observer.disconnect();
+	}, []);
+	const mainValue = data[config.value.field];
+	const formattedValue = typeof mainValue === "number" ? formatNumber(mainValue, config.value.format) : String(mainValue ?? "N/A");
+	let comparisonElement = null;
+	if (config.comparison) {
+		const comparisonValue = data[config.comparison.field];
+		if (typeof comparisonValue === "number") {
+			const formattedComparison = formatNumber(comparisonValue, config.comparison.format);
+			const isPositive = comparisonValue > 0;
+			const isNegative = comparisonValue < 0;
+			let colorClass = "text-surface-500 dark:text-surface-400";
+			if (config.comparison.intent === "increase_is_good") {
+				if (isPositive) colorClass = "text-emerald-500";
+				if (isNegative) colorClass = "text-red-500";
+			} else if (config.comparison.intent === "decrease_is_good") {
+				if (isPositive) colorClass = "text-red-500";
+				if (isNegative) colorClass = "text-emerald-500";
+			}
+			comparisonElement = /* @__PURE__ */ jsx("span", {
+				className: `font-medium ${compact ? "text-[10px]" : "text-xs"} ${colorClass}`,
+				children: formattedComparison
+			});
+		}
+	}
+	const isSmall = compact || containerWidth !== null && containerWidth < 200;
+	const iconElement = config.icon ? getIcon(config.icon, "text-surface-400 dark:text-surface-500", void 0, isSmall ? 14 : 18) : null;
+	if (compact) return /* @__PURE__ */ jsxs("div", {
+		className: cls("flex flex-col gap-0.5 px-2.5 py-2 rounded-md bg-transparent border min-w-0", defaultBorderMixin),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[10px] uppercase tracking-wider text-surface-400 dark:text-surface-500 truncate",
+			children: title
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-semibold tabular-nums text-surface-800 dark:text-surface-100",
+				children: formattedValue
+			}), comparisonElement]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: embedded ? `flex flex-col min-w-0 h-full ${isSmall ? "px-3.5 py-3" : "px-5 py-4"}` : cls("rounded-lg flex flex-col min-w-0 bg-transparent border", defaultBorderMixin, isSmall ? "px-3.5 py-3" : "px-5 py-4"),
+		style: embedded ? void 0 : fixedHeight ? { height: fixedHeight } : { minHeight: isSmall ? 68 : 92 },
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: `flex items-center justify-between ${isSmall ? "mb-1" : "mb-2"}`,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col min-w-0",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: `font-medium leading-snug truncate text-surface-500 dark:text-surface-400 ${isSmall ? "text-[11px]" : "text-xs"}`,
+						children: title
+					}), config.dateRange && !isSmall && /* @__PURE__ */ jsx("span", {
+						className: "text-[10px] text-surface-400 dark:text-surface-500 truncate mt-0.5",
+						children: config.dateRange
+					})]
+				}), iconElement && /* @__PURE__ */ jsx("span", {
+					className: "ml-2 shrink-0",
+					children: iconElement
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: `font-semibold leading-tight tracking-tight break-all text-surface-800 dark:text-surface-100 ${isSmall ? "text-lg" : containerWidth !== null && containerWidth < 300 ? "text-xl" : "text-2xl"}`,
+				children: formattedValue
+			}),
+			comparisonElement && /* @__PURE__ */ jsx("div", {
+				className: isSmall ? "mt-0.5" : "mt-1",
+				children: comparisonElement
+			})
+		]
+	});
 }
 InsightsScorecardView.displayName = "InsightsScorecardView";
-function InsightWidgetSkeleton(t0) {
-  const $ = c(18);
-  const {
-    config,
-    compact: t1,
-    embedded: t2,
-    fixedHeight
-  } = t0;
-  const compact = t1 === void 0 ? false : t1;
-  const embedded = t2 === void 0 ? false : t2;
-  const hasComparison = Boolean(config.comparison);
-  const hasIcon = Boolean(config.icon);
-  const hasDateRange = Boolean(config.dateRange);
-  if (compact) {
-    const t32 = embedded ? "h-full px-2.5 py-2" : "flex flex-col gap-0.5 rounded-md bg-transparent border min-w-0 px-2.5 py-2";
-    const t4 = !embedded && defaultBorderMixin;
-    let t5;
-    if ($[0] !== t32 || $[1] !== t4) {
-      t5 = cls("animate-pulse", t32, t4);
-      $[0] = t32;
-      $[1] = t4;
-      $[2] = t5;
-    } else {
-      t5 = $[2];
-    }
-    let t6;
-    if ($[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t6 = /* @__PURE__ */ jsx("div", { className: "bg-surface-200 dark:bg-surface-700 rounded-sm", style: {
-        height: 14,
-        width: 48
-      } });
-      $[3] = t6;
-    } else {
-      t6 = $[3];
-    }
-    let t7;
-    if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t7 = /* @__PURE__ */ jsx("div", { className: "bg-surface-200 dark:bg-surface-700 rounded-sm", style: {
-        height: 20,
-        width: 40
-      } });
-      $[4] = t7;
-    } else {
-      t7 = $[4];
-    }
-    let t8;
-    if ($[5] !== hasComparison) {
-      t8 = hasComparison && /* @__PURE__ */ jsx("div", { className: "bg-surface-200/60 dark:bg-surface-700/60 rounded-sm", style: {
-        height: 14,
-        width: 28
-      } });
-      $[5] = hasComparison;
-      $[6] = t8;
-    } else {
-      t8 = $[6];
-    }
-    let t9;
-    if ($[7] !== t8) {
-      t9 = /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
-        t7,
-        t8
-      ] });
-      $[7] = t8;
-      $[8] = t9;
-    } else {
-      t9 = $[8];
-    }
-    let t10;
-    if ($[9] !== t5 || $[10] !== t9) {
-      t10 = /* @__PURE__ */ jsxs("div", { className: t5, children: [
-        t6,
-        t9
-      ] });
-      $[9] = t5;
-      $[10] = t9;
-      $[11] = t10;
-    } else {
-      t10 = $[11];
-    }
-    return t10;
-  }
-  let t3;
-  if ($[12] !== embedded || $[13] !== fixedHeight || $[14] !== hasComparison || $[15] !== hasDateRange || $[16] !== hasIcon) {
-    t3 = /* @__PURE__ */ jsx(StandardSkeleton, { hasComparison, hasIcon, hasDateRange, embedded, fixedHeight });
-    $[12] = embedded;
-    $[13] = fixedHeight;
-    $[14] = hasComparison;
-    $[15] = hasDateRange;
-    $[16] = hasIcon;
-    $[17] = t3;
-  } else {
-    t3 = $[17];
-  }
-  return t3;
+//#endregion
+//#region src/components/InsightWidgetSkeleton.tsx
+/**
+* Skeleton loader for scorecard insight widgets — displays animated
+* shimmer placeholders that exactly match the final rendered layout
+* of InsightsScorecardView for a given config, preventing layout shift.
+*
+* The skeleton receives the scorecard config so it can conditionally
+* render placeholder lines for comparison, dateRange, and icon —
+* only when the loaded view will also render them.
+*
+* The standard skeleton mirrors InsightsScorecardView's responsive
+* container-width breakpoints (ResizeObserver → isSmall / isMedium)
+* and uses placeholder heights that exactly match the **computed**
+* Tailwind line-heights (accounting for `leading-*` overrides).
+* This guarantees a pixel-perfect skeleton → loaded transition.
+*/
+function InsightWidgetSkeleton({ config, compact = false, embedded = false, fixedHeight }) {
+	const hasComparison = Boolean(config.comparison);
+	const hasIcon = Boolean(config.icon);
+	const hasDateRange = Boolean(config.dateRange);
+	if (compact) return /* @__PURE__ */ jsxs("div", {
+		className: cls("animate-pulse", embedded ? "h-full px-2.5 py-2" : "flex flex-col gap-0.5 rounded-md bg-transparent border min-w-0 px-2.5 py-2", !embedded && defaultBorderMixin),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "bg-surface-200 dark:bg-surface-700 rounded-sm",
+			style: {
+				height: 14,
+				width: 48
+			}
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline gap-1.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "bg-surface-200 dark:bg-surface-700 rounded-sm",
+				style: {
+					height: 20,
+					width: 40
+				}
+			}), hasComparison && /* @__PURE__ */ jsx("div", {
+				className: "bg-surface-200/60 dark:bg-surface-700/60 rounded-sm",
+				style: {
+					height: 14,
+					width: 28
+				}
+			})]
+		})]
+	});
+	return /* @__PURE__ */ jsx(StandardSkeleton, {
+		hasComparison,
+		hasIcon,
+		hasDateRange,
+		embedded,
+		fixedHeight
+	});
 }
-function StandardSkeleton(t0) {
-  const $ = c(37);
-  const {
-    hasComparison,
-    hasIcon,
-    hasDateRange,
-    embedded,
-    fixedHeight
-  } = t0;
-  const containerRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(null);
-  let t1;
-  let t2;
-  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
-      if (!containerRef.current) {
-        return;
-      }
-      setContainerWidth(containerRef.current.offsetWidth);
-      const observer = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          setContainerWidth(entry.contentRect.width);
-        }
-      });
-      observer.observe(containerRef.current);
-      return () => observer.disconnect();
-    };
-    t2 = [];
-    $[0] = t1;
-    $[1] = t2;
-  } else {
-    t1 = $[0];
-    t2 = $[1];
-  }
-  React.useLayoutEffect(t1, t2);
-  const isSmall = containerWidth !== null && containerWidth < 200;
-  const titleHeight = isSmall ? 15 : 16.5;
-  const valueHeight = isSmall ? 22.5 : containerWidth !== null && containerWidth < 300 ? 25 : 30;
-  const iconSize = isSmall ? 14 : 18;
-  let t3;
-  let t4;
-  if ($[2] !== embedded || $[3] !== isSmall) {
-    const baseClass = embedded ? `flex flex-col min-w-0 h-full ${isSmall ? "px-3.5 py-3" : "px-5 py-4"}` : cls("rounded-lg flex flex-col min-w-0 bg-transparent border", defaultBorderMixin, isSmall ? "px-3.5 py-3" : "px-5 py-4");
-    t3 = containerRef;
-    t4 = cls("animate-pulse", baseClass);
-    $[2] = embedded;
-    $[3] = isSmall;
-    $[4] = t3;
-    $[5] = t4;
-  } else {
-    t3 = $[4];
-    t4 = $[5];
-  }
-  let t5;
-  if ($[6] !== embedded || $[7] !== fixedHeight || $[8] !== isSmall) {
-    t5 = embedded ? void 0 : fixedHeight ? {
-      height: fixedHeight
-    } : {
-      minHeight: isSmall ? 68 : 92
-    };
-    $[6] = embedded;
-    $[7] = fixedHeight;
-    $[8] = isSmall;
-    $[9] = t5;
-  } else {
-    t5 = $[9];
-  }
-  const t6 = `flex items-center justify-between ${isSmall ? "mb-1" : "mb-2"}`;
-  let t7;
-  if ($[10] !== titleHeight) {
-    t7 = /* @__PURE__ */ jsx("div", { className: "bg-surface-200 dark:bg-surface-700 rounded", style: {
-      height: titleHeight,
-      width: "60%"
-    } });
-    $[10] = titleHeight;
-    $[11] = t7;
-  } else {
-    t7 = $[11];
-  }
-  let t8;
-  if ($[12] !== hasDateRange || $[13] !== isSmall) {
-    t8 = hasDateRange && !isSmall && /* @__PURE__ */ jsx("div", { className: "bg-surface-200/60 dark:bg-surface-700/60 rounded mt-0.5", style: {
-      height: 14,
-      width: "40%"
-    } });
-    $[12] = hasDateRange;
-    $[13] = isSmall;
-    $[14] = t8;
-  } else {
-    t8 = $[14];
-  }
-  let t9;
-  if ($[15] !== t7 || $[16] !== t8) {
-    t9 = /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-      t7,
-      t8
-    ] });
-    $[15] = t7;
-    $[16] = t8;
-    $[17] = t9;
-  } else {
-    t9 = $[17];
-  }
-  let t10;
-  if ($[18] !== hasIcon || $[19] !== iconSize) {
-    t10 = hasIcon && /* @__PURE__ */ jsx("span", { className: "ml-2 shrink-0", children: /* @__PURE__ */ jsx("div", { className: "bg-surface-200 dark:bg-surface-700 rounded", style: {
-      height: iconSize,
-      width: iconSize
-    } }) });
-    $[18] = hasIcon;
-    $[19] = iconSize;
-    $[20] = t10;
-  } else {
-    t10 = $[20];
-  }
-  let t11;
-  if ($[21] !== t10 || $[22] !== t6 || $[23] !== t9) {
-    t11 = /* @__PURE__ */ jsxs("div", { className: t6, children: [
-      t9,
-      t10
-    ] });
-    $[21] = t10;
-    $[22] = t6;
-    $[23] = t9;
-    $[24] = t11;
-  } else {
-    t11 = $[24];
-  }
-  let t12;
-  if ($[25] !== valueHeight) {
-    t12 = /* @__PURE__ */ jsx("div", { className: "bg-surface-200 dark:bg-surface-700 rounded", style: {
-      height: valueHeight,
-      width: "40%"
-    } });
-    $[25] = valueHeight;
-    $[26] = t12;
-  } else {
-    t12 = $[26];
-  }
-  let t13;
-  if ($[27] !== hasComparison || $[28] !== isSmall) {
-    t13 = hasComparison && /* @__PURE__ */ jsx("div", { className: isSmall ? "mt-0.5" : "mt-1", children: /* @__PURE__ */ jsx("div", { className: "bg-surface-200/60 dark:bg-surface-700/60 rounded", style: {
-      height: 16,
-      width: "25%"
-    } }) });
-    $[27] = hasComparison;
-    $[28] = isSmall;
-    $[29] = t13;
-  } else {
-    t13 = $[29];
-  }
-  let t14;
-  if ($[30] !== t11 || $[31] !== t12 || $[32] !== t13 || $[33] !== t3 || $[34] !== t4 || $[35] !== t5) {
-    t14 = /* @__PURE__ */ jsxs("div", { ref: t3, className: t4, style: t5, children: [
-      t11,
-      t12,
-      t13
-    ] });
-    $[30] = t11;
-    $[31] = t12;
-    $[32] = t13;
-    $[33] = t3;
-    $[34] = t4;
-    $[35] = t5;
-    $[36] = t14;
-  } else {
-    t14 = $[36];
-  }
-  return t14;
+/**
+* Inner component for the standard scorecard skeleton.
+*
+* Mirrors InsightsScorecardView's layout by:
+* 1. Using the same ResizeObserver + containerWidth pattern for
+*    responsive breakpoints (isSmall < 200px, isMedium < 300px).
+* 2. Using placeholder heights derived from the exact computed
+*    Tailwind line-heights that InsightsScorecardView renders.
+* 3. Matching all container classes, margins, paddings, and flex
+*    layout properties identically.
+*/
+function StandardSkeleton({ hasComparison, hasIcon, hasDateRange, embedded, fixedHeight }) {
+	const containerRef = useRef(null);
+	const [containerWidth, setContainerWidth] = useState(null);
+	React.useLayoutEffect(() => {
+		if (!containerRef.current) return;
+		setContainerWidth(containerRef.current.offsetWidth);
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) setContainerWidth(entry.contentRect.width);
+		});
+		observer.observe(containerRef.current);
+		return () => observer.disconnect();
+	}, []);
+	const isSmall = containerWidth !== null && containerWidth < 200;
+	const titleHeight = isSmall ? 15 : 16.5;
+	const valueHeight = isSmall ? 22.5 : containerWidth !== null && containerWidth < 300 ? 25 : 30;
+	const comparisonHeight = 16;
+	const iconSize = isSmall ? 14 : 18;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: cls("animate-pulse", embedded ? `flex flex-col min-w-0 h-full ${isSmall ? "px-3.5 py-3" : "px-5 py-4"}` : cls("rounded-lg flex flex-col min-w-0 bg-transparent border", defaultBorderMixin, isSmall ? "px-3.5 py-3" : "px-5 py-4")),
+		style: embedded ? void 0 : fixedHeight ? { height: fixedHeight } : { minHeight: isSmall ? 68 : 92 },
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: `flex items-center justify-between ${isSmall ? "mb-1" : "mb-2"}`,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col min-w-0",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "bg-surface-200 dark:bg-surface-700 rounded",
+						style: {
+							height: titleHeight,
+							width: "60%"
+						}
+					}), hasDateRange && !isSmall && /* @__PURE__ */ jsx("div", {
+						className: "bg-surface-200/60 dark:bg-surface-700/60 rounded mt-0.5",
+						style: {
+							height: 14,
+							width: "40%"
+						}
+					})]
+				}), hasIcon && /* @__PURE__ */ jsx("span", {
+					className: "ml-2 shrink-0",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "bg-surface-200 dark:bg-surface-700 rounded",
+						style: {
+							height: iconSize,
+							width: iconSize
+						}
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "bg-surface-200 dark:bg-surface-700 rounded",
+				style: {
+					height: valueHeight,
+					width: "40%"
+				}
+			}),
+			hasComparison && /* @__PURE__ */ jsx("div", {
+				className: isSmall ? "mt-0.5" : "mt-1",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "bg-surface-200/60 dark:bg-surface-700/60 rounded",
+					style: {
+						height: comparisonHeight,
+						width: "25%"
+					}
+				})
+			})
+		]
+	});
 }
 InsightWidgetSkeleton.displayName = "InsightWidgetSkeleton";
+//#endregion
+//#region src/components/InsightWidget.tsx
+/**
+* Compute a deterministic fixed height for a standard scorecard based
+* on which optional elements the config declares.  This eliminates
+* layout shift between skeleton and loaded states.
+*
+* Breakdown (non-compact, non-small):
+*   py-4 padding:     16 + 16 = 32
+*   title row:        16.5  (text-xs leading-snug)
+*   mb-2 margin:      8
+*   value:            30    (text-2xl leading-tight)
+*   ---
+*   base:             86.5
+*   + dateRange:      +16   (14px text + 2px mt-0.5)
+*   + comparison:     +20   (16px text + 4px mt-1)
+*/
 function computeFixedHeight(config) {
-  let h = 86.5;
-  if (config.dateRange) h += 16;
-  if (config.comparison) h += 20;
-  return Math.ceil(h);
+	let h = 86.5;
+	if (config.dateRange) h += 16;
+	if (config.comparison) h += 20;
+	return Math.ceil(h);
 }
-function InsightWidget(t0) {
-  const $ = c(37);
-  const {
-    definition,
-    collectionSlug,
-    path,
-    parentCollectionSlugs,
-    compact: t1,
-    embedded: t2
-  } = t0;
-  const compact = t1 === void 0 ? false : t1;
-  const embedded = t2 === void 0 ? false : t2;
-  let t3;
-  if ($[0] !== collectionSlug || $[1] !== parentCollectionSlugs || $[2] !== path) {
-    t3 = {
-      path,
-      collectionSlug,
-      parentCollectionSlugs
-    };
-    $[0] = collectionSlug;
-    $[1] = parentCollectionSlugs;
-    $[2] = path;
-    $[3] = t3;
-  } else {
-    t3 = $[3];
-  }
-  const {
-    data,
-    loading,
-    error
-  } = useInsightsData(definition, t3);
-  let t4;
-  if ($[4] !== compact || $[5] !== definition.scorecard || $[6] !== embedded) {
-    t4 = !compact && !embedded ? computeFixedHeight(definition.scorecard) : void 0;
-    $[4] = compact;
-    $[5] = definition.scorecard;
-    $[6] = embedded;
-    $[7] = t4;
-  } else {
-    t4 = $[7];
-  }
-  const fixedHeight = t4;
-  if (loading) {
-    let t52;
-    if ($[8] !== compact || $[9] !== definition.scorecard || $[10] !== embedded || $[11] !== fixedHeight) {
-      t52 = /* @__PURE__ */ jsx(InsightWidgetSkeleton, { config: definition.scorecard, compact, embedded, fixedHeight });
-      $[8] = compact;
-      $[9] = definition.scorecard;
-      $[10] = embedded;
-      $[11] = fixedHeight;
-      $[12] = t52;
-    } else {
-      t52 = $[12];
-    }
-    return t52;
-  }
-  if (error) {
-    const t52 = `text-red-500/70 dark:text-red-400/70 text-[0.8125rem] ${embedded ? "px-5 py-4 h-full" : `rounded-lg bg-red-500/5 dark:bg-red-400/5 border border-red-500/10 dark:border-red-400/10 ${compact ? "px-3.5 py-3" : "px-5 py-4"}`}`;
-    let t62;
-    if ($[13] !== fixedHeight) {
-      t62 = fixedHeight ? {
-        height: fixedHeight
-      } : void 0;
-      $[13] = fixedHeight;
-      $[14] = t62;
-    } else {
-      t62 = $[14];
-    }
-    let t7;
-    if ($[15] !== definition.title) {
-      t7 = /* @__PURE__ */ jsx("div", { className: "font-semibold mb-1", children: definition.title });
-      $[15] = definition.title;
-      $[16] = t7;
-    } else {
-      t7 = $[16];
-    }
-    let t8;
-    if ($[17] !== error.message) {
-      t8 = /* @__PURE__ */ jsx("div", { children: error.message });
-      $[17] = error.message;
-      $[18] = t8;
-    } else {
-      t8 = $[18];
-    }
-    let t9;
-    if ($[19] !== t52 || $[20] !== t62 || $[21] !== t7 || $[22] !== t8) {
-      t9 = /* @__PURE__ */ jsxs("div", { className: t52, style: t62, children: [
-        t7,
-        t8
-      ] });
-      $[19] = t52;
-      $[20] = t62;
-      $[21] = t7;
-      $[22] = t8;
-      $[23] = t9;
-    } else {
-      t9 = $[23];
-    }
-    return t9;
-  }
-  if (!data || data.rows.length === 0) {
-    const t52 = `text-surface-400 dark:text-surface-500 text-[0.8125rem] ${embedded ? "px-5 py-4 h-full" : `rounded-lg bg-surface-100 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 ${compact ? "px-3.5 py-3" : "px-5 py-4"}`}`;
-    let t62;
-    if ($[24] !== fixedHeight) {
-      t62 = fixedHeight ? {
-        height: fixedHeight
-      } : void 0;
-      $[24] = fixedHeight;
-      $[25] = t62;
-    } else {
-      t62 = $[25];
-    }
-    let t7;
-    if ($[26] !== definition.title || $[27] !== t52 || $[28] !== t62) {
-      t7 = /* @__PURE__ */ jsxs("div", { className: t52, style: t62, children: [
-        definition.title,
-        " — No data"
-      ] });
-      $[26] = definition.title;
-      $[27] = t52;
-      $[28] = t62;
-      $[29] = t7;
-    } else {
-      t7 = $[29];
-    }
-    return t7;
-  }
-  const t5 = data.rows[0];
-  let t6;
-  if ($[30] !== compact || $[31] !== definition.scorecard || $[32] !== definition.title || $[33] !== embedded || $[34] !== fixedHeight || $[35] !== t5) {
-    t6 = /* @__PURE__ */ jsx(InsightsScorecardView, { config: definition.scorecard, data: t5, title: definition.title, compact, embedded, fixedHeight });
-    $[30] = compact;
-    $[31] = definition.scorecard;
-    $[32] = definition.title;
-    $[33] = embedded;
-    $[34] = fixedHeight;
-    $[35] = t5;
-    $[36] = t6;
-  } else {
-    t6 = $[36];
-  }
-  return t6;
+/**
+* Single insight widget orchestrator.
+*
+* Wraps skeleton and loaded states in a fixed-height container
+* (computed from the scorecard config) to prevent layout shift.
+*
+* All theme-awareness is handled via Tailwind `dark:` classes.
+*/
+function InsightWidget({ definition, collectionSlug, path, parentCollectionSlugs, parentEntityIds, compact = false, embedded = false }) {
+	const { data, loading, error } = useInsightsData(definition, {
+		path,
+		collectionSlug,
+		parentCollectionSlugs
+	});
+	const fixedHeight = !compact && !embedded ? computeFixedHeight(definition.scorecard) : void 0;
+	if (loading) return /* @__PURE__ */ jsx(InsightWidgetSkeleton, {
+		config: definition.scorecard,
+		compact,
+		embedded,
+		fixedHeight
+	});
+	if (error) return /* @__PURE__ */ jsxs("div", {
+		className: `text-red-500/70 dark:text-red-400/70 text-[0.8125rem] ${embedded ? "px-5 py-4 h-full" : `rounded-lg bg-red-500/5 dark:bg-red-400/5 border border-red-500/10 dark:border-red-400/10 ${compact ? "px-3.5 py-3" : "px-5 py-4"}`}`,
+		style: fixedHeight ? { height: fixedHeight } : void 0,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "font-semibold mb-1",
+			children: definition.title
+		}), /* @__PURE__ */ jsx("div", { children: error.message })]
+	});
+	if (!data || data.rows.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: `text-surface-400 dark:text-surface-500 text-[0.8125rem] ${embedded ? "px-5 py-4 h-full" : `rounded-lg bg-surface-100 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 ${compact ? "px-3.5 py-3" : "px-5 py-4"}`}`,
+		style: fixedHeight ? { height: fixedHeight } : void 0,
+		children: [definition.title, " — No data"]
+	});
+	return /* @__PURE__ */ jsx(InsightsScorecardView, {
+		config: definition.scorecard,
+		data: data.rows[0],
+		title: definition.title,
+		compact,
+		embedded,
+		fixedHeight
+	});
 }
 InsightWidget.displayName = "InsightWidget";
-function HomeCardInsightSlot(t0) {
-  const $ = c(10);
-  const {
-    slug,
-    insights
-  } = t0;
-  if (!insights || insights.length === 0) {
-    return null;
-  }
-  const estimatedRows = Math.ceil(insights.length / 2);
-  const minHeight = estimatedRows * 42 + (estimatedRows - 1) * 6;
-  let t1;
-  if ($[0] !== minHeight) {
-    t1 = {
-      minHeight
-    };
-    $[0] = minHeight;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  let t2;
-  if ($[2] !== insights || $[3] !== slug) {
-    let t32;
-    if ($[5] !== slug) {
-      t32 = (def) => /* @__PURE__ */ jsx(InsightWidget, { definition: def, collectionSlug: slug, compact: true }, def.id);
-      $[5] = slug;
-      $[6] = t32;
-    } else {
-      t32 = $[6];
-    }
-    t2 = insights.map(t32);
-    $[2] = insights;
-    $[3] = slug;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  let t3;
-  if ($[7] !== t1 || $[8] !== t2) {
-    t3 = /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5 mt-2", style: t1, children: t2 });
-    $[7] = t1;
-    $[8] = t2;
-    $[9] = t3;
-  } else {
-    t3 = $[9];
-  }
-  return t3;
+//#endregion
+//#region src/components/HomeCardInsightSlot.tsx
+/**
+* Renders compact insight widgets inline within a home page collection card.
+* Injected via the `home.card.insight` slot.
+*
+* Uses a horizontal flex layout so multiple cards sit side by side.
+*/
+function HomeCardInsightSlot({ slug, insights }) {
+	if (!insights || insights.length === 0) return null;
+	const estimatedRows = Math.ceil(insights.length / 2);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center gap-1.5 mt-2",
+		style: { minHeight: estimatedRows * 42 + (estimatedRows - 1) * 6 },
+		children: insights.map((def) => /* @__PURE__ */ jsx(InsightWidget, {
+			definition: def,
+			collectionSlug: slug,
+			compact: true
+		}, def.id))
+	});
 }
 HomeCardInsightSlot.displayName = "HomeCardInsightSlot";
-function HomeInsightsSlot(t0) {
-  const $ = c(5);
-  const {
-    insights
-  } = t0;
-  if (!insights || insights.length === 0) {
-    return null;
-  }
-  let t1;
-  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t1 = {
-      minHeight: 92
-    };
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  let t2;
-  if ($[1] !== insights) {
-    t2 = insights.map(_temp);
-    $[1] = insights;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  let t3;
-  if ($[3] !== t2) {
-    t3 = /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 pb-6", style: t1, children: t2 });
-    $[3] = t2;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  return t3;
-}
-function _temp(def) {
-  return /* @__PURE__ */ jsx(InsightWidget, { definition: def }, def.id);
+//#endregion
+//#region src/components/HomeInsightsSlot.tsx
+/**
+* Scorecard insights panel rendered at the top of the home page.
+* Injected via the `home.children.start` slot.
+*
+* Renders scorecards in a responsive grid (up to 4 columns).
+*/
+function HomeInsightsSlot({ insights }) {
+	if (!insights || insights.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 pb-6",
+		style: { minHeight: 92 },
+		children: insights.map((def) => /* @__PURE__ */ jsx(InsightWidget, { definition: def }, def.id))
+	});
 }
 HomeInsightsSlot.displayName = "HomeInsightsSlot";
-function CollectionInsightsInline(t0) {
-  const $ = c(11);
-  const {
-    insights,
-    path,
-    parentCollectionSlugs,
-    parentEntityIds
-  } = t0;
-  if (!insights || insights.length === 0) {
-    return null;
-  }
-  let t1;
-  if ($[0] !== insights || $[1] !== parentCollectionSlugs || $[2] !== parentEntityIds || $[3] !== path) {
-    let t22;
-    if ($[5] !== parentCollectionSlugs || $[6] !== parentEntityIds || $[7] !== path) {
-      t22 = (def) => /* @__PURE__ */ jsx(InsightWidget, { definition: def, path, parentCollectionSlugs, parentEntityIds }, def.id);
-      $[5] = parentCollectionSlugs;
-      $[6] = parentEntityIds;
-      $[7] = path;
-      $[8] = t22;
-    } else {
-      t22 = $[8];
-    }
-    t1 = insights.map(t22);
-    $[0] = insights;
-    $[1] = parentCollectionSlugs;
-    $[2] = parentEntityIds;
-    $[3] = path;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
-  }
-  let t2;
-  if ($[9] !== t1) {
-    t2 = /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 pb-4", children: t1 });
-    $[9] = t1;
-    $[10] = t2;
-  } else {
-    t2 = $[10];
-  }
-  return t2;
+//#endregion
+//#region src/components/CollectionInsightsInline.tsx
+/**
+* Renders scorecard insight widgets inline within a collection's list view,
+* positioned below the title and above the main data list.
+*
+* Injected via the `collection.insights` slot.
+*/
+function CollectionInsightsInline({ insights, path, parentCollectionSlugs, parentEntityIds }) {
+	if (!insights || insights.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 pb-4",
+		children: insights.map((def) => /* @__PURE__ */ jsx(InsightWidget, {
+			definition: def,
+			path,
+			parentCollectionSlugs,
+			parentEntityIds
+		}, def.id))
+	});
 }
 CollectionInsightsInline.displayName = "CollectionInsightsInline";
+//#endregion
+//#region src/useInsightsPlugin.tsx
+/**
+* Creates the Insights plugin for Rebase.
+*
+* This plugin injects scorecard widgets into key UI locations:
+* - **Home page header**: KPI overview via `home.children.start` slot
+* - **Collection list view**: Scorecards inline (below title, above list) via `collection.insights` slot
+* - **Home page cards**: Compact scorecard metrics auto-extracted from collection insights via `home.card.insight` slot
+*
+* Collection-level insights (`collections.<slug>`) are the single source of truth:
+* scorecards render in the collection list view and are automatically extracted
+* to show as compact widgets on the corresponding home page card.
+*
+* Each insight owns its own `data()` callback — use the Rebase client SDK,
+* call a custom function, or hit any external API. Full flexibility, zero new endpoints.
+*
+* @example
+* ```typescript
+* import { useInsightsPlugin } from "@rebasepro/plugin-insights";
+*
+* const insightsPlugin = useInsightsPlugin({
+*     cacheTTL: 120_000,
+*     insights: {
+*         home: [
+*             { id: "revenue", title: "Revenue", data: async () => ..., scorecard: { ... } },
+*         ],
+*         collections: {
+*             orders: [
+*                 { id: "total", title: "Total Orders", data: async () => ..., scorecard: { ... } },
+*             ],
+*         },
+*     },
+* });
+* ```
+*/
 function useInsightsPlugin(config) {
-  const {
-    insights,
-    cacheTTL
-  } = config;
-  const slots = [];
-  if (insights.home && insights.home.length > 0) {
-    const homeInsights = insights.home;
-    slots.push({
-      slot: "home.children.start",
-      Component: (props) => /* @__PURE__ */ jsx(HomeInsightsSlot, { ...props, insights: homeInsights }),
-      order: 10
-    });
-  }
-  if (insights.collections) {
-    for (const [slug, defs] of Object.entries(insights.collections)) {
-      if (defs.length === 0) continue;
-      const collectionInsights = defs;
-      slots.push({
-        slot: "collection.insights",
-        Component: (props) => {
-          const path = props.path;
-          const collectionSlug = path?.split("/").filter(Boolean).pop() ?? "";
-          if (collectionSlug !== slug) return null;
-          return /* @__PURE__ */ jsx(CollectionInsightsInline, { ...props, insights: collectionInsights });
-        },
-        order: 10
-      });
-      slots.push({
-        slot: "home.card.insight",
-        Component: (props) => {
-          const cardSlug = props.slug;
-          if (cardSlug !== slug) return null;
-          return /* @__PURE__ */ jsx(HomeCardInsightSlot, { ...props, insights: collectionInsights });
-        },
-        order: 10
-      });
-    }
-  }
-  return {
-    key: "plugin-insights",
-    slots,
-    providers: [{
-      scope: "root",
-      Component: InsightsProvider,
-      props: {
-        cacheTTL
-      }
-    }]
-  };
+	const { insights, cacheTTL } = config;
+	return React.useMemo(() => {
+		const slots = [];
+		if (insights.home && insights.home.length > 0) {
+			const homeInsights = insights.home;
+			slots.push({
+				slot: "home.children.start",
+				Component: (props) => /* @__PURE__ */ jsx(HomeInsightsSlot, {
+					...props,
+					insights: homeInsights
+				}),
+				order: 10
+			});
+		}
+		if (insights.collections) for (const [slug, defs] of Object.entries(insights.collections)) {
+			if (defs.length === 0) continue;
+			const collectionInsights = defs;
+			slots.push({
+				slot: "collection.insights",
+				Component: (props) => {
+					if ((props.path?.split("/").filter(Boolean).pop() ?? "") !== slug) return null;
+					return /* @__PURE__ */ jsx(CollectionInsightsInline, {
+						...props,
+						insights: collectionInsights
+					});
+				},
+				order: 10
+			});
+			slots.push({
+				slot: "home.card.insight",
+				Component: (props) => {
+					if (props.slug !== slug) return null;
+					return /* @__PURE__ */ jsx(HomeCardInsightSlot, {
+						...props,
+						insights: collectionInsights
+					});
+				},
+				order: 10
+			});
+		}
+		return {
+			key: "plugin-insights",
+			slots,
+			providers: [{
+				scope: "root",
+				Component: InsightsProvider,
+				props: { cacheTTL }
+			}]
+		};
+	}, [insights, cacheTTL]);
 }
-export {
-  InsightWidget,
-  InsightWidgetSkeleton,
-  InsightsCache,
-  InsightsProvider,
-  InsightsScorecardView,
-  useInsightsData,
-  useInsightsEngine,
-  useInsightsPlugin
-};
-//# sourceMappingURL=index.es.js.map
+//#endregion
+export { InsightWidget, InsightWidgetSkeleton, InsightsCache, InsightsProvider, InsightsScorecardView, useInsightsData, useInsightsEngine, useInsightsPlugin };
+
+//# sourceMappingURL=index.es.js.map