@rebasepro/plugin-insights 0.0.1-canary.eae7889 → 0.1.0

package/src/components/InsightWidgetSkeleton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useState } from "react";
 import { cls, defaultBorderMixin } from "@rebasepro/ui";
 import type { ScorecardConfig } from "../types";
 
@@ -10,6 +10,12 @@ import type { ScorecardConfig } from "../types";
  * 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.
  */
 export function InsightWidgetSkeleton({
     config,
@@ -30,7 +36,7 @@ export function InsightWidgetSkeleton({
     // Matches InsightsScorecardView compact layout:
     //   container: flex flex-col gap-0.5 px-2.5 py-2 rounded-md border
     //   title:     text-[10px] uppercase → line-height ~14px
-    //   value row: text-sm font-semibold → line-height ~20px
+    //   value row: text-sm font-semibold → line-height 20px
     //   + optional comparison text-[10px] inside value row
     if (compact) {
         return (
@@ -63,57 +69,133 @@ export function InsightWidgetSkeleton({
     }
 
     // ── Standard scorecard skeleton ─────────────────────────────────────
-    // Matches InsightsScorecardView standard layout (isSmall = false):
-    //   container: rounded-lg px-5 py-4 border, minHeight 92
-    //   title row: flex justify-between mb-2
-    //     title:     text-xs → line-height ~16px
-    //     dateRange: text-[10px] mt-0.5 → ~14px  (optional)
-    //     icon:      18×18 ml-2                    (optional)
-    //   value:     text-2xl → line-height ~32px
-    //   comparison: text-xs mt-1 → ~16px           (optional)
+    return <StandardSkeleton
+        hasComparison={hasComparison}
+        hasIcon={hasIcon}
+        hasDateRange={hasDateRange}
+        embedded={embedded}
+    />;
+}
+
+// ── Tailwind line-height reference ──────────────────────────────────────
+// All heights below are the **computed** CSS line-heights, accounting
+// for `leading-*` overrides that InsightsScorecardView applies.
+//
+// Title:
+//   text-xs (12px) + leading-snug (1.375)  → 12 × 1.375 = 16.5px
+//   text-[11px]    + leading-snug (1.375)  → 11 × 1.375 = 15.125px
+//
+// DateRange:
+//   text-[10px] with no explicit LH        → normal ≈ 14px (browser)
+//
+// Value:
+//   text-2xl (24px) + leading-tight (1.25) → 24 × 1.25 = 30px
+//   text-xl  (20px) + leading-tight (1.25) → 20 × 1.25 = 25px
+//   text-lg  (18px) + leading-tight (1.25) → 18 × 1.25 = 22.5px
+//
+// Comparison:
+//   text-xs (12px)  → built-in LH 1rem     = 16px
+
+/**
+ * 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,
+}: {
+    hasComparison: boolean;
+    hasIcon: boolean;
+    hasDateRange: boolean;
+    embedded: boolean;
+}) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [containerWidth, setContainerWidth] = useState<number | null>(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();
+    }, []);
+
+    // Mirror InsightsScorecardView's responsive breakpoints exactly
+    const isSmall = containerWidth !== null && containerWidth < 200;
+
+    // Computed line-heights for each breakpoint
+    // Title: text-xs + leading-snug = 16.5px, text-[11px] + leading-snug = 15.125px
+    const titleHeight = isSmall ? 15 : 16.5;
+    // Value: leading-tight (×1.25) applied on top of font-size
+    const valueHeight = isSmall
+        ? 22.5  // text-lg: 18 × 1.25
+        : (containerWidth !== null && containerWidth < 300)
+            ? 25    // text-xl: 20 × 1.25
+            : 30;   // text-2xl: 24 × 1.25
+    // Comparison: text-xs = 12px / 16px line-height (no leading override)
+    const comparisonHeight = 16;
+    // Icon: 14px when small, 18px otherwise
+    const iconSize = isSmall ? 14 : 18;
+
+    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");
+
     return (
         <div
-            className={cls(
-                "animate-pulse",
-                embedded
-                    ? "h-full px-5 py-4"
-                    : "rounded-lg bg-transparent border px-5 py-4",
-                !embedded && defaultBorderMixin
-            )}
-            style={embedded ? undefined : { minHeight: 92 }}
+            ref={containerRef}
+            className={cls("animate-pulse", baseClass)}
+            style={embedded ? undefined : { minHeight: isSmall ? 68 : 92 }}
         >
-            {/* Title row */}
-            <div className="flex items-center justify-between mb-2">
+            {/* Title row — identical flex structure to InsightsScorecardView */}
+            <div className={`flex items-center justify-between ${isSmall ? "mb-1" : "mb-2"}`}>
                 <div className="flex flex-col min-w-0">
-                    {/* Title */}
+                    {/* Title placeholder */}
                     <div className="bg-surface-200 dark:bg-surface-700 rounded"
-                        style={{ height: 16, width: "60%" }}
+                        style={{ height: titleHeight, width: "60%" }}
                     />
-                    {/* DateRange (only if config has it) */}
-                    {hasDateRange && (
+                    {/* DateRange — hidden when isSmall, same as real view (line 134) */}
+                    {hasDateRange && !isSmall && (
                         <div className="bg-surface-200/60 dark:bg-surface-700/60 rounded mt-0.5"
                             style={{ height: 14, width: "40%" }}
                         />
                     )}
                 </div>
-                {/* Icon placeholder (only if config has it) */}
+                {/* Icon placeholder — same wrapper as real view */}
                 {hasIcon && (
-                    <div className="bg-surface-200 dark:bg-surface-700 rounded ml-2 shrink-0"
-                        style={{ height: 18, width: 18 }}
-                    />
+                    <span className="ml-2 shrink-0">
+                        <div className="bg-surface-200 dark:bg-surface-700 rounded"
+                            style={{ height: iconSize, width: iconSize }}
+                        />
+                    </span>
                 )}
             </div>
 
-            {/* Main value */}
+            {/* Main value placeholder */}
             <div className="bg-surface-200 dark:bg-surface-700 rounded"
-                style={{ height: 32, width: "40%" }}
+                style={{ height: valueHeight, width: "40%" }}
             />
 
-            {/* Comparison (only if config has it) */}
+            {/* Comparison placeholder */}
             {hasComparison && (
-                <div className="bg-surface-200/60 dark:bg-surface-700/60 rounded mt-1"
-                    style={{ height: 16, width: "25%" }}
-                />
+                <div className={isSmall ? "mt-0.5" : "mt-1"}>
+                    <div className="bg-surface-200/60 dark:bg-surface-700/60 rounded"
+                        style={{ height: comparisonHeight, width: "25%" }}
+                    />
+                </div>
             )}
         </div>
     );

package/src/engine/useInsightsData.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import type { InsightDefinition, InsightDataResult } from "../types";
+import type { InsightDefinition, InsightDataResult, InsightContext } from "../types";
 import { useInsightsEngine } from "./InsightsProvider";
 import { useAuthController } from "@rebasepro/core";
 
@@ -16,7 +16,7 @@ import { useAuthController } from "@rebasepro/core";
  */
 export function useInsightsData(
     definition: InsightDefinition,
-    collectionSlug?: string
+    context: InsightContext
 ): {
     data: InsightDataResult | null;
     loading: boolean;
@@ -30,7 +30,7 @@ export function useInsightsData(
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<Error | null>(null);
 
-    const cacheKey = `${definition.id}:${collectionSlug ?? "global"}`;
+    const cacheKey = `${definition.id}:${context.path ?? context.collectionSlug ?? "global"}`;
 
     useEffect(() => {
         // Keep showing skeleton until both auth and engine are ready
@@ -71,7 +71,7 @@ export function useInsightsData(
         setLoading(true);
         setError(null);
 
-        const promise = definition.data();
+        const promise = definition.data(context);
 
         cache.setInflight(cacheKey, promise);
 
@@ -94,7 +94,7 @@ export function useInsightsData(
         return () => {
             cancelled = true;
         };
-    }, [definition.id, definition.data, collectionSlug, cacheKey, cache, authReady]);
+    }, [definition.id, definition.data, context.path, context.collectionSlug, cacheKey, cache, authReady]);
 
     return { data, loading, error };
 }

package/src/types/engine.ts

@@ -1,5 +1,15 @@
 import type { DataRow, ScorecardConfig } from "./widgets";
 
+export interface InsightContext {
+    /** The resolved path of the collection (e.g., "products/123/orders" or "orders") */
+    path?: string;
+    parentCollectionSlugs?: string[];
+    /** The parent entity IDs if this is a subcollection (e.g., ["123"]) */
+    parentEntityIds?: string[];
+    /** The collection slug if this is an insight at the collection level */
+    collectionSlug?: string;
+}
+
 /**
  * Result returned by an insight's data callback.
  */
@@ -45,7 +55,7 @@ export interface InsightDefinition {
      * }
      * ```
      */
-    data: () => Promise<InsightDataResult>;
+    data: (context: InsightContext) => Promise<InsightDataResult>;
 
     /** Scorecard field mapping + formatting. */
     scorecard: ScorecardConfig;

package/src/useInsightsPlugin.tsx

@@ -77,7 +77,7 @@ export function useInsightsPlugin(config: InsightsPluginConfig): RebasePlugin {
                     if (collectionSlug !== slug) return null;
                     return (
                         <CollectionInsightsInline
-                            {...props as { path: string; collection: unknown; parentCollectionIds: string[] }}
+                            {...props as { path: string; collection: unknown; parentCollectionSlugs: string[], parentEntityIds: string[] }}
                             insights={collectionInsights}
                         />
                     );