@rebasepro/plugin-insights 0.5.0 → 0.6.1

package/dist/index.umd.js

@@ -1,1097 +1,646 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("react"), require("@rebasepro/core"), require("@rebasepro/ui")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@rebasepro/core", "@rebasepro/ui"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.Rebase = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.core, global.ui));
-})(this, (function(exports2, jsxRuntime, reactCompilerRuntime, React, core, ui) {
-  "use strict";
-  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 = React.createContext(null);
-  function InsightsProvider(t0) {
-    const $ = reactCompilerRuntime.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__ */ jsxRuntime.jsx(InsightsContext.Provider, { value, children });
-      $[4] = children;
-      $[5] = value;
-      $[6] = t5;
-    } else {
-      t5 = $[6];
-    }
-    return t5;
-  }
-  function useInsightsEngine() {
-    return React.useContext(InsightsContext);
-  }
-  function useInsightsData(definition, context) {
-    const $ = reactCompilerRuntime.c(18);
-    const engine = useInsightsEngine();
-    const cache = engine?.cache ?? null;
-    const {
-      initialLoading,
-      authLoading,
-      user,
-      loginSkipped
-    } = core.useAuthController();
-    const authReady = !initialLoading && !authLoading && (Boolean(user) || loginSkipped);
-    const [data, setData] = React.useState(null);
-    const [loading, setLoading] = React.useState(true);
-    const [error, setError] = React.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];
-    }
-    React.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;
-  }
-  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;
-  }
-  function InsightsScorecardView(t0) {
-    const $ = reactCompilerRuntime.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 = React.useRef(null);
-    const [containerWidth, setContainerWidth] = React.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__ */ jsxRuntime.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 ? core.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 = ui.cls("flex flex-col gap-0.5 px-2.5 py-2 rounded-md bg-transparent border min-w-0", ui.defaultBorderMixin);
-        $[14] = t72;
-      } else {
-        t72 = $[14];
-      }
-      let t82;
-      if ($[15] !== title) {
-        t82 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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"}` : ui.cls("rounded-lg flex flex-col min-w-0 bg-transparent border", ui.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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;
-  }
-  InsightsScorecardView.displayName = "InsightsScorecardView";
-  function InsightWidgetSkeleton(t0) {
-    const $ = reactCompilerRuntime.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 && ui.defaultBorderMixin;
-      let t5;
-      if ($[0] !== t32 || $[1] !== t4) {
-        t5 = ui.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StandardSkeleton, { hasComparison, hasIcon, hasDateRange, embedded, fixedHeight });
-      $[12] = embedded;
-      $[13] = fixedHeight;
-      $[14] = hasComparison;
-      $[15] = hasDateRange;
-      $[16] = hasIcon;
-      $[17] = t3;
-    } else {
-      t3 = $[17];
-    }
-    return t3;
-  }
-  function StandardSkeleton(t0) {
-    const $ = reactCompilerRuntime.c(37);
-    const {
-      hasComparison,
-      hasIcon,
-      hasDateRange,
-      embedded,
-      fixedHeight
-    } = t0;
-    const containerRef = React.useRef(null);
-    const [containerWidth, setContainerWidth] = React.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"}` : ui.cls("rounded-lg flex flex-col min-w-0 bg-transparent border", ui.defaultBorderMixin, isSmall ? "px-3.5 py-3" : "px-5 py-4");
-      t3 = containerRef;
-      t4 = ui.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "ml-2 shrink-0", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: isSmall ? "mt-0.5" : "mt-1", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
-  }
-  InsightWidgetSkeleton.displayName = "InsightWidgetSkeleton";
-  function computeFixedHeight(config) {
-    let h = 86.5;
-    if (config.dateRange) h += 16;
-    if (config.comparison) h += 20;
-    return Math.ceil(h);
-  }
-  function InsightWidget(t0) {
-    const $ = reactCompilerRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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;
-  }
-  InsightWidget.displayName = "InsightWidget";
-  function HomeCardInsightSlot(t0) {
-    const $ = reactCompilerRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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;
-  }
-  HomeCardInsightSlot.displayName = "HomeCardInsightSlot";
-  function HomeInsightsSlot(t0) {
-    const $ = reactCompilerRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(InsightWidget, { definition: def }, def.id);
-  }
-  HomeInsightsSlot.displayName = "HomeInsightsSlot";
-  function CollectionInsightsInline(t0) {
-    const $ = reactCompilerRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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;
-  }
-  CollectionInsightsInline.displayName = "CollectionInsightsInline";
-  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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(HomeCardInsightSlot, { ...props, insights: collectionInsights });
-          },
-          order: 10
-        });
-      }
-    }
-    return {
-      key: "plugin-insights",
-      slots,
-      providers: [{
-        scope: "root",
-        Component: InsightsProvider,
-        props: {
-          cacheTTL
-        }
-      }]
-    };
-  }
-  exports2.InsightWidget = InsightWidget;
-  exports2.InsightWidgetSkeleton = InsightWidgetSkeleton;
-  exports2.InsightsCache = InsightsCache;
-  exports2.InsightsProvider = InsightsProvider;
-  exports2.InsightsScorecardView = InsightsScorecardView;
-  exports2.useInsightsData = useInsightsData;
-  exports2.useInsightsEngine = useInsightsEngine;
-  exports2.useInsightsPlugin = useInsightsPlugin;
-  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
-}));
-//# sourceMappingURL=index.umd.js.map
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react/jsx-runtime"), require("@rebasepro/core"), require("@rebasepro/ui")) : typeof define === "function" && define.amd ? define([
+		"exports",
+		"react",
+		"react/jsx-runtime",
+		"@rebasepro/core",
+		"@rebasepro/ui"
+	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.Rebase = {}, global.react, global.react_jsx_runtime, global._rebasepro_core, global._rebasepro_ui));
+})(this, function(exports, react, react_jsx_runtime, _rebasepro_core, _rebasepro_ui) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region \0rolldown/runtime.js
+	var __create = Object.create;
+	var __defProp = Object.defineProperty;
+	var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+	var __getOwnPropNames = Object.getOwnPropertyNames;
+	var __getProtoOf = Object.getPrototypeOf;
+	var __hasOwnProp = Object.prototype.hasOwnProperty;
+	var __copyProps = (to, from, except, desc) => {
+		if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+				get: ((k) => from[k]).bind(null, key),
+				enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+			});
+		}
+		return to;
+	};
+	var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+		value: mod,
+		enumerable: true
+	}) : target, mod));
+	//#endregion
+	react = __toESM(react, 1);
+	//#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 = (0, react.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 = (0, react.useMemo)(() => new InsightsCache(cacheTTL), [cacheTTL]);
+		const value = (0, react.useMemo)(() => ({ cache }), [cache]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.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 (0, react.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 cache = useInsightsEngine()?.cache ?? null;
+		const { initialLoading, authLoading, user, loginSkipped } = (0, _rebasepro_core.useAuthController)();
+		const authReady = !initialLoading && !authLoading && (Boolean(user) || loginSkipped);
+		const [data, setData] = (0, react.useState)(null);
+		const [loading, setLoading] = (0, react.useState)(true);
+		const [error, setError] = (0, react.useState)(null);
+		const cacheKey = `${definition.id}:${context.path ?? context.collectionSlug ?? "global"}`;
+		(0, react.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;
+	}
+	/**
+	* 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 = (0, react.useRef)(null);
+		const [containerWidth, setContainerWidth] = (0, react.useState)(null);
+		react.default.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__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `font-medium ${compact ? "text-[10px]" : "text-xs"} ${colorClass}`,
+					children: formattedComparison
+				});
+			}
+		}
+		const isSmall = compact || containerWidth !== null && containerWidth < 200;
+		const iconElement = config.icon ? (0, _rebasepro_core.getIcon)(config.icon, "text-surface-400 dark:text-surface-500", void 0, isSmall ? 14 : 18) : null;
+		if (compact) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, _rebasepro_ui.cls)("flex flex-col gap-0.5 px-2.5 py-2 rounded-md bg-transparent border min-w-0", _rebasepro_ui.defaultBorderMixin),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[10px] uppercase tracking-wider text-surface-400 dark:text-surface-500 truncate",
+				children: title
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-baseline gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-sm font-semibold tabular-nums text-surface-800 dark:text-surface-100",
+					children: formattedValue
+				}), comparisonElement]
+			})]
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: containerRef,
+			className: embedded ? `flex flex-col min-w-0 h-full ${isSmall ? "px-3.5 py-3" : "px-5 py-4"}` : (0, _rebasepro_ui.cls)("rounded-lg flex flex-col min-w-0 bg-transparent border", _rebasepro_ui.defaultBorderMixin, isSmall ? "px-3.5 py-3" : "px-5 py-4"),
+			style: embedded ? void 0 : fixedHeight ? { height: fixedHeight } : { minHeight: isSmall ? 68 : 92 },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: `flex items-center justify-between ${isSmall ? "mb-1" : "mb-2"}`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col min-w-0",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] text-surface-400 dark:text-surface-500 truncate mt-0.5",
+							children: config.dateRange
+						})]
+					}), iconElement && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "ml-2 shrink-0",
+						children: iconElement
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: isSmall ? "mt-0.5" : "mt-1",
+					children: comparisonElement
+				})
+			]
+		});
+	}
+	InsightsScorecardView.displayName = "InsightsScorecardView";
+	//#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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, _rebasepro_ui.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 && _rebasepro_ui.defaultBorderMixin),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "bg-surface-200 dark:bg-surface-700 rounded-sm",
+				style: {
+					height: 14,
+					width: 48
+				}
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-baseline gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-surface-200 dark:bg-surface-700 rounded-sm",
+					style: {
+						height: 20,
+						width: 40
+					}
+				}), hasComparison && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-surface-200/60 dark:bg-surface-700/60 rounded-sm",
+					style: {
+						height: 14,
+						width: 28
+					}
+				})]
+			})]
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StandardSkeleton, {
+			hasComparison,
+			hasIcon,
+			hasDateRange,
+			embedded,
+			fixedHeight
+		});
+	}
+	/**
+	* 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 = (0, react.useRef)(null);
+		const [containerWidth, setContainerWidth] = (0, react.useState)(null);
+		react.default.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: containerRef,
+			className: (0, _rebasepro_ui.cls)("animate-pulse", embedded ? `flex flex-col min-w-0 h-full ${isSmall ? "px-3.5 py-3" : "px-5 py-4"}` : (0, _rebasepro_ui.cls)("rounded-lg flex flex-col min-w-0 bg-transparent border", _rebasepro_ui.defaultBorderMixin, isSmall ? "px-3.5 py-3" : "px-5 py-4")),
+			style: embedded ? void 0 : fixedHeight ? { height: fixedHeight } : { minHeight: isSmall ? 68 : 92 },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: `flex items-center justify-between ${isSmall ? "mb-1" : "mb-2"}`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col min-w-0",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "bg-surface-200 dark:bg-surface-700 rounded",
+							style: {
+								height: titleHeight,
+								width: "60%"
+							}
+						}), hasDateRange && !isSmall && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "bg-surface-200/60 dark:bg-surface-700/60 rounded mt-0.5",
+							style: {
+								height: 14,
+								width: "40%"
+							}
+						})]
+					}), hasIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "ml-2 shrink-0",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "bg-surface-200 dark:bg-surface-700 rounded",
+							style: {
+								height: iconSize,
+								width: iconSize
+							}
+						})
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-surface-200 dark:bg-surface-700 rounded",
+					style: {
+						height: valueHeight,
+						width: "40%"
+					}
+				}),
+				hasComparison && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: isSmall ? "mt-0.5" : "mt-1",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.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);
+	}
+	/**
+	* 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__ */ (0, react_jsx_runtime.jsx)(InsightWidgetSkeleton, {
+			config: definition.scorecard,
+			compact,
+			embedded,
+			fixedHeight
+		});
+		if (error) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "font-semibold mb-1",
+				children: definition.title
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: error.message })]
+		});
+		if (!data || data.rows.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(InsightsScorecardView, {
+			config: definition.scorecard,
+			data: data.rows[0],
+			title: definition.title,
+			compact,
+			embedded,
+			fixedHeight
+		});
+	}
+	InsightWidget.displayName = "InsightWidget";
+	//#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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(InsightWidget, {
+				definition: def,
+				collectionSlug: slug,
+				compact: true
+			}, def.id))
+		});
+	}
+	HomeCardInsightSlot.displayName = "HomeCardInsightSlot";
+	//#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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(InsightWidget, { definition: def }, def.id))
+		});
+	}
+	HomeInsightsSlot.displayName = "HomeInsightsSlot";
+	//#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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 pb-4",
+			children: insights.map((def) => /* @__PURE__ */ (0, react_jsx_runtime.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;
+		return react.default.useMemo(() => {
+			const slots = [];
+			if (insights.home && insights.home.length > 0) {
+				const homeInsights = insights.home;
+				slots.push({
+					slot: "home.children.start",
+					Component: (props) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(CollectionInsightsInline, {
+							...props,
+							insights: collectionInsights
+						});
+					},
+					order: 10
+				});
+				slots.push({
+					slot: "home.card.insight",
+					Component: (props) => {
+						if (props.slug !== slug) return null;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HomeCardInsightSlot, {
+							...props,
+							insights: collectionInsights
+						});
+					},
+					order: 10
+				});
+			}
+			return {
+				key: "plugin-insights",
+				slots,
+				providers: [{
+					scope: "root",
+					Component: InsightsProvider,
+					props: { cacheTTL }
+				}]
+			};
+		}, [insights, cacheTTL]);
+	}
+	//#endregion
+	exports.InsightWidget = InsightWidget;
+	exports.InsightWidgetSkeleton = InsightWidgetSkeleton;
+	exports.InsightsCache = InsightsCache;
+	exports.InsightsProvider = InsightsProvider;
+	exports.InsightsScorecardView = InsightsScorecardView;
+	exports.useInsightsData = useInsightsData;
+	exports.useInsightsEngine = useInsightsEngine;
+	exports.useInsightsPlugin = useInsightsPlugin;
+});
+
+//# sourceMappingURL=index.umd.js.map