@lindaui/blocks 0.4.2 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lindaui/blocks",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Composed UI sections (auth, lists, master-detail, charts) built on @lindaui/ui — importable npm package, not a copy-paste registry.",
   "author": "Franco Carballar <francocarballar@gmail.com>",
   "license": "MIT",
@@ -30,180 +30,325 @@
   "exports": {
     "./login-form": {
       "types": "./dist/login-form.d.ts",
-      "import": "./dist/login-form.js"
+      "import": "./dist/login-form.js",
+      "default": "./dist/login-form.js"
     },
     "./list-item": {
       "types": "./dist/list-item.d.ts",
-      "import": "./dist/list-item.js"
+      "import": "./dist/list-item.js",
+      "default": "./dist/list-item.js"
     },
     "./list-pane": {
       "types": "./dist/list-pane.d.ts",
-      "import": "./dist/list-pane.js"
+      "import": "./dist/list-pane.js",
+      "default": "./dist/list-pane.js"
     },
     "./detail-panel": {
       "types": "./dist/detail-panel.d.ts",
-      "import": "./dist/detail-panel.js"
+      "import": "./dist/detail-panel.js",
+      "default": "./dist/detail-panel.js"
     },
     "./confirm-dialog": {
       "types": "./dist/confirm-dialog.d.ts",
-      "import": "./dist/confirm-dialog.js"
+      "import": "./dist/confirm-dialog.js",
+      "default": "./dist/confirm-dialog.js"
     },
     "./image-viewer": {
       "types": "./dist/image-viewer.d.ts",
-      "import": "./dist/image-viewer.js"
+      "import": "./dist/image-viewer.js",
+      "default": "./dist/image-viewer.js"
     },
     "./split-workspace": {
       "types": "./dist/split-workspace.d.ts",
-      "import": "./dist/split-workspace.js"
+      "import": "./dist/split-workspace.js",
+      "default": "./dist/split-workspace.js"
     },
     "./document-panel": {
       "types": "./dist/document-panel.d.ts",
-      "import": "./dist/document-panel.js"
+      "import": "./dist/document-panel.js",
+      "default": "./dist/document-panel.js"
     },
     "./document-reader": {
       "types": "./dist/document-reader.d.ts",
-      "import": "./dist/document-reader.js"
+      "import": "./dist/document-reader.js",
+      "default": "./dist/document-reader.js"
     },
     "./recording-overlay": {
       "types": "./dist/recording-overlay.d.ts",
-      "import": "./dist/recording-overlay.js"
+      "import": "./dist/recording-overlay.js",
+      "default": "./dist/recording-overlay.js"
     },
     "./field-array-form": {
       "types": "./dist/field-array-form.d.ts",
-      "import": "./dist/field-array-form.js"
+      "import": "./dist/field-array-form.js",
+      "default": "./dist/field-array-form.js"
     },
     "./auth-provider": {
       "types": "./dist/auth-provider.d.ts",
-      "import": "./dist/auth-provider.js"
+      "import": "./dist/auth-provider.js",
+      "default": "./dist/auth-provider.js"
     },
     "./auth-layout": {
       "types": "./dist/auth-layout.d.ts",
-      "import": "./dist/auth-layout.js"
+      "import": "./dist/auth-layout.js",
+      "default": "./dist/auth-layout.js"
     },
     "./area-chart": {
       "types": "./dist/area-chart.d.ts",
-      "import": "./dist/area-chart.js"
+      "import": "./dist/area-chart.js",
+      "default": "./dist/area-chart.js"
     },
     "./bar-chart": {
       "types": "./dist/bar-chart.d.ts",
-      "import": "./dist/bar-chart.js"
+      "import": "./dist/bar-chart.js",
+      "default": "./dist/bar-chart.js"
     },
     "./line-chart": {
       "types": "./dist/line-chart.d.ts",
-      "import": "./dist/line-chart.js"
+      "import": "./dist/line-chart.js",
+      "default": "./dist/line-chart.js"
     },
     "./pie-chart": {
       "types": "./dist/pie-chart.d.ts",
-      "import": "./dist/pie-chart.js"
+      "import": "./dist/pie-chart.js",
+      "default": "./dist/pie-chart.js"
     },
     "./radar-chart": {
       "types": "./dist/radar-chart.d.ts",
-      "import": "./dist/radar-chart.js"
+      "import": "./dist/radar-chart.js",
+      "default": "./dist/radar-chart.js"
     },
     "./radial-chart": {
       "types": "./dist/radial-chart.d.ts",
-      "import": "./dist/radial-chart.js"
+      "import": "./dist/radial-chart.js",
+      "default": "./dist/radial-chart.js"
     },
     "./stat-card": {
       "types": "./dist/stat-card.d.ts",
-      "import": "./dist/stat-card.js"
+      "import": "./dist/stat-card.js",
+      "default": "./dist/stat-card.js"
     },
     "./chart-card": {
       "types": "./dist/chart-card.d.ts",
-      "import": "./dist/chart-card.js"
+      "import": "./dist/chart-card.js",
+      "default": "./dist/chart-card.js"
     },
     "./stats-grid": {
       "types": "./dist/stats-grid.d.ts",
-      "import": "./dist/stats-grid.js"
+      "import": "./dist/stats-grid.js",
+      "default": "./dist/stats-grid.js"
     },
     "./workspace-back-button": {
       "types": "./dist/workspace-back-button.d.ts",
-      "import": "./dist/workspace-back-button.js"
+      "import": "./dist/workspace-back-button.js",
+      "default": "./dist/workspace-back-button.js"
     },
     "./table-pane": {
       "types": "./dist/table-pane.d.ts",
-      "import": "./dist/table-pane.js"
+      "import": "./dist/table-pane.js",
+      "default": "./dist/table-pane.js"
     },
     "./audio-player": {
       "types": "./dist/audio-player.d.ts",
-      "import": "./dist/audio-player.js"
+      "import": "./dist/audio-player.js",
+      "default": "./dist/audio-player.js"
     },
     "./chat-avatar": {
       "types": "./dist/chat-avatar.d.ts",
-      "import": "./dist/chat-avatar.js"
+      "import": "./dist/chat-avatar.js",
+      "default": "./dist/chat-avatar.js"
     },
     "./chat-date-divider": {
       "types": "./dist/chat-date-divider.d.ts",
-      "import": "./dist/chat-date-divider.js"
+      "import": "./dist/chat-date-divider.js",
+      "default": "./dist/chat-date-divider.js"
     },
     "./chat-header": {
       "types": "./dist/chat-header.d.ts",
-      "import": "./dist/chat-header.js"
+      "import": "./dist/chat-header.js",
+      "default": "./dist/chat-header.js"
     },
     "./chat-layout": {
       "types": "./dist/chat-layout.d.ts",
-      "import": "./dist/chat-layout.js"
+      "import": "./dist/chat-layout.js",
+      "default": "./dist/chat-layout.js"
     },
     "./chat-time-divider": {
       "types": "./dist/chat-time-divider.d.ts",
-      "import": "./dist/chat-time-divider.js"
+      "import": "./dist/chat-time-divider.js",
+      "default": "./dist/chat-time-divider.js"
     },
     "./chat-types": {
       "types": "./dist/chat-types.d.ts",
-      "import": "./dist/chat-types.js"
+      "import": "./dist/chat-types.js",
+      "default": "./dist/chat-types.js"
     },
     "./conversation-list": {
       "types": "./dist/conversation-list.d.ts",
-      "import": "./dist/conversation-list.js"
+      "import": "./dist/conversation-list.js",
+      "default": "./dist/conversation-list.js"
     },
     "./conversation-list-item": {
       "types": "./dist/conversation-list-item.d.ts",
-      "import": "./dist/conversation-list-item.js"
+      "import": "./dist/conversation-list-item.js",
+      "default": "./dist/conversation-list-item.js"
     },
     "./conversation-thread": {
       "types": "./dist/conversation-thread.d.ts",
-      "import": "./dist/conversation-thread.js"
+      "import": "./dist/conversation-thread.js",
+      "default": "./dist/conversation-thread.js"
     },
     "./empty-chat-view": {
       "types": "./dist/empty-chat-view.d.ts",
-      "import": "./dist/empty-chat-view.js"
+      "import": "./dist/empty-chat-view.js",
+      "default": "./dist/empty-chat-view.js"
     },
     "./message-bubble": {
       "types": "./dist/message-bubble.d.ts",
-      "import": "./dist/message-bubble.js"
+      "import": "./dist/message-bubble.js",
+      "default": "./dist/message-bubble.js"
     },
     "./message-composer": {
       "types": "./dist/message-composer.d.ts",
-      "import": "./dist/message-composer.js"
+      "import": "./dist/message-composer.js",
+      "default": "./dist/message-composer.js"
     },
     "./time-range-picker": {
       "types": "./dist/time-range-picker.d.ts",
-      "import": "./dist/time-range-picker.js"
+      "import": "./dist/time-range-picker.js",
+      "default": "./dist/time-range-picker.js"
     },
     "./entity-health-card": {
       "types": "./dist/entity-health-card.d.ts",
-      "import": "./dist/entity-health-card.js"
+      "import": "./dist/entity-health-card.js",
+      "default": "./dist/entity-health-card.js"
     },
     "./fetching-indicator": {
       "types": "./dist/fetching-indicator.d.ts",
-      "import": "./dist/fetching-indicator.js"
+      "import": "./dist/fetching-indicator.js",
+      "default": "./dist/fetching-indicator.js"
+    },
+    "./app-shell": {
+      "types": "./dist/app-shell.d.ts",
+      "import": "./dist/app-shell.js",
+      "default": "./dist/app-shell.js"
+    },
+    "./channel-settings": {
+      "types": "./dist/channel-settings.d.ts",
+      "import": "./dist/channel-settings.js",
+      "default": "./dist/channel-settings.js"
+    },
+    "./chat": {
+      "types": "./dist/chat.d.ts",
+      "import": "./dist/chat.js",
+      "default": "./dist/chat.js"
+    },
+    "./command-palette": {
+      "types": "./dist/command-palette.d.ts",
+      "import": "./dist/command-palette.js",
+      "default": "./dist/command-palette.js"
+    },
+    "./compat": {
+      "types": "./dist/compat.d.ts",
+      "import": "./dist/compat.js",
+      "default": "./dist/compat.js"
+    },
+    "./connection-panel": {
+      "types": "./dist/connection-panel.d.ts",
+      "import": "./dist/connection-panel.js",
+      "default": "./dist/connection-panel.js"
+    },
+    "./entity-card": {
+      "types": "./dist/entity-card.d.ts",
+      "import": "./dist/entity-card.js",
+      "default": "./dist/entity-card.js"
+    },
+    "./entity-switcher": {
+      "types": "./dist/entity-switcher.d.ts",
+      "import": "./dist/entity-switcher.js",
+      "default": "./dist/entity-switcher.js"
+    },
+    "./filter-bar": {
+      "types": "./dist/filter-bar.d.ts",
+      "import": "./dist/filter-bar.js",
+      "default": "./dist/filter-bar.js"
+    },
+    "./kanban-board": {
+      "types": "./dist/kanban-board.d.ts",
+      "import": "./dist/kanban-board.js",
+      "default": "./dist/kanban-board.js"
+    },
+    "./kanban-column": {
+      "types": "./dist/kanban-column.d.ts",
+      "import": "./dist/kanban-column.js",
+      "default": "./dist/kanban-column.js"
+    },
+    "./legacy-kpi-card": {
+      "types": "./dist/legacy-kpi-card.d.ts",
+      "import": "./dist/legacy-kpi-card.js",
+      "default": "./dist/legacy-kpi-card.js"
+    },
+    "./save-bar": {
+      "types": "./dist/save-bar.d.ts",
+      "import": "./dist/save-bar.js",
+      "default": "./dist/save-bar.js"
+    },
+    "./settings-layout": {
+      "types": "./dist/settings-layout.d.ts",
+      "import": "./dist/settings-layout.js",
+      "default": "./dist/settings-layout.js"
+    },
+    "./source-selector": {
+      "types": "./dist/source-selector.d.ts",
+      "import": "./dist/source-selector.js",
+      "default": "./dist/source-selector.js"
+    },
+    "./status-filters": {
+      "types": "./dist/status-filters.d.ts",
+      "import": "./dist/status-filters.js",
+      "default": "./dist/status-filters.js"
+    },
+    "./stepper": {
+      "types": "./dist/stepper.d.ts",
+      "import": "./dist/stepper.js",
+      "default": "./dist/stepper.js"
+    },
+    "./analytics": {
+      "types": "./dist/analytics.d.ts",
+      "import": "./dist/analytics.js",
+      "default": "./dist/analytics.js"
     }
   },
   "files": [
     "dist",
+    "src",
+    "!src/**/*.test.*",
+    "!src/**/*.stories.*",
+    "!dist/**/*.test.*",
+    "!dist/**/*.stories.*",
+    "!src/test-setup.ts",
     "LICENSE",
     "README.md",
     "llms.txt"
   ],
   "peerDependencies": {
-    "@lindaui/tokens": ">=0.2.0",
-    "@lindaui/ui": ">=0.2.0",
+    "@lindaui/tokens": ">=0.4.0",
+    "@lindaui/ui": ">=0.5.0",
     "lucide-react": ">=0.4",
     "react": ">=19",
     "react-dom": ">=19",
     "react-hook-form": ">=7",
     "recharts": ">=3"
   },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@internationalized/date": "3.12.4",
+    "@react-types/shared": "3.36.1",
+    "dayjs": "1.11.23",
+    "framer-motion": "14.0.0"
+  },
   "devDependencies": {
     "@hookform/resolvers": "^5.9.1",
     "@testing-library/jest-dom": "^7.0.1",
@@ -224,11 +369,11 @@
     "vite": "^8.3.4",
     "vitest": "^5.0.3",
     "zod": "^4.6.5",
-    "@lindaui/tokens": "0.3.1",
-    "@lindaui/ui": "0.4.1"
+    "@lindaui/tokens": "0.4.0",
+    "@lindaui/ui": "0.5.0"
   },
   "scripts": {
-    "build": "bunchee --no-dts && tsc -p tsconfig.build.json",
+    "build": "bunchee --no-dts && tsc -p tsconfig.build.json && node ../../scripts/normalize-declarations.mjs dist",
     "dev": "bunchee --watch",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run",

package/src/analytics/ai-cost-card.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { AlertCircle, DollarSign, TrendingUp, Zap } from "lucide-react";
+import { memo, type ElementType } from "react";
+import { AnalyticsCard } from "./analytics-card";
+import type { AiCostCardProps } from "./types";
+
+function formatUsd(value: number): string { return value.toLocaleString("en-US", { currency: "USD", maximumFractionDigits: 2, minimumFractionDigits: 2, style: "currency" }); }
+function StatBlock({ icon: Icon, label, value, accent = false }: { icon: ElementType; label: string; value: string; accent?: boolean }) {
+  return <div className={`rounded-xl px-4 py-3 ${accent ? "bg-accent/5" : "bg-surface-secondary"}`}>
+    <div className="mb-1.5 flex items-center gap-1.5"><Icon className={`h-3.5 w-3.5 ${accent ? "text-accent" : "text-muted"}`} /><p className="text-muted text-xs">{label}</p></div>
+    <p className="font-bold text-foreground text-xl tabular-nums">{value}</p>
+  </div>;
+}
+function NotConfigured({ t }: { t: (key: string) => string }) {
+  return <div className="flex flex-col items-center justify-center gap-2 py-8 text-center">
+    <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-surface-secondary"><AlertCircle className="h-5 w-5 text-muted" /></div>
+    <p className="font-medium text-muted text-sm">{t("analytics.aiCost.notConfigured")}</p>
+    <p className="max-w-[220px] text-muted text-xs">{t("analytics.aiCost.notConfiguredHint")}</p>
+  </div>;
+}
+function LoadingState() { return <div className="grid grid-cols-3 gap-3">{["a", "b", "c"].map((k) => <div className="h-[72px] animate-pulse rounded-xl bg-surface-secondary" key={k} />)}</div>; }
+export const AiCostCard = memo(({ aiCost, isLoading, t }: AiCostCardProps) => (
+  <AnalyticsCard icon={Zap} title={t("analytics.aiCost.title")}>
+    {isLoading ? <LoadingState /> : aiCost?.available === true ? <div className="grid grid-cols-3 gap-3">
+      <StatBlock accent icon={DollarSign} label={t("analytics.aiCost.totalCost")} value={formatUsd(aiCost.totalCostUsd)} />
+      <StatBlock icon={TrendingUp} label={t("analytics.aiCost.costPerConversion")} value={aiCost.conversionsCount > 0 ? formatUsd(aiCost.costPerConversion) : "—"} />
+      <StatBlock icon={Zap} label={t("analytics.aiCost.conversions")} value={aiCost.conversionsCount.toLocaleString()} />
+    </div> : <NotConfigured t={t} />}
+  </AnalyticsCard>
+));

package/src/analytics/ai-performance-card.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Bot, Clock, Shield, User } from "lucide-react";
+import { memo } from "react";
+import { Divider } from "@lindaui/ui/compat";
+import { AnalyticsCard } from "./analytics-card";
+import type { AiPerformanceCardProps, AiVsHumanData } from "./types";
+
+const DEFAULT_AI_VS_HUMAN: AiVsHumanData = { aiConverted: 0, aiLeads: 0, aiRate: 0, humanConverted: 0, humanLeads: 0, humanRate: 0 };
+function rateColorClass(rate: number): string { return rate >= 10 ? "text-success" : rate >= 5 ? "text-warning" : "text-muted"; }
+function StatRow({ label, value, valueClass = "text-foreground" }: { label: string; value: string | number; valueClass?: string }) {
+  return <div className="flex items-center justify-between"><span className="text-muted text-xs">{label}</span><span className={`font-semibold text-xs tabular-nums ${valueClass}`}>{value}</span></div>;
+}
+export const AiPerformanceCard = memo(({ containmentRate = 0, aiVsHuman: aiVsHumanProp, avgResponseTimeMinutes = 0, t }: AiPerformanceCardProps) => {
+  const aiVsHuman = aiVsHumanProp ?? DEFAULT_AI_VS_HUMAN;
+  return <AnalyticsCard icon={Bot} title={t("analytics.aiPerformance.title")}>
+    <div className="grid grid-cols-2 gap-3">
+      <div className="rounded-xl bg-accent/5 px-4 py-3">
+        <div className="mb-1.5 flex items-center gap-1.5"><Shield className="h-3.5 w-3.5 text-accent" /><p className="text-muted text-xs">{t("analytics.aiPerformance.containment")}</p></div>
+        <p className="font-bold text-3xl text-foreground tabular-nums">{containmentRate}<span className="ml-0.5 font-medium text-lg text-muted">%</span></p>
+      </div>
+      <div className="rounded-xl bg-surface-secondary px-4 py-3">
+        <div className="mb-1.5 flex items-center gap-1.5"><Clock className="h-3.5 w-3.5 text-muted" /><p className="text-muted text-xs">{t("analytics.aiPerformance.responseTime")}</p></div>
+        <p className="font-bold text-3xl text-foreground tabular-nums">{avgResponseTimeMinutes}<span className="ml-1 font-normal text-muted text-sm">{t("analytics.aiPerformance.minutes")}</span></p>
+      </div>
+    </div>
+    <Divider className="my-4" />
+    <p className="mb-3 font-medium text-muted text-xs uppercase tracking-wider">{t("analytics.aiPerformance.comparison")}</p>
+    <div className="grid grid-cols-2 gap-4">
+      <div className="space-y-3">
+        <div className="flex items-center gap-1.5"><div className="flex h-5 w-5 items-center justify-center rounded-md bg-accent/10"><Bot className="h-3 w-3 text-accent" /></div><p className="font-semibold text-foreground text-xs">{t("analytics.aiPerformance.ai")}</p></div>
+        <div className="space-y-2">
+          <StatRow label={t("analytics.aiPerformance.leads")} value={aiVsHuman.aiLeads.toLocaleString()} />
+          <StatRow label={t("analytics.aiPerformance.converted")} value={aiVsHuman.aiConverted.toLocaleString()} />
+          <StatRow label={t("analytics.aiPerformance.rate")} value={`${aiVsHuman.aiRate}%`} valueClass={rateColorClass(aiVsHuman.aiRate)} />
+        </div>
+      </div>
+      <div className="space-y-3 border-border border-l pl-4">
+        <div className="flex items-center gap-1.5"><div className="flex h-5 w-5 items-center justify-center rounded-md bg-surface-secondary"><User className="h-3 w-3 text-muted" /></div><p className="font-semibold text-foreground text-xs">{t("analytics.aiPerformance.human")}</p></div>
+        <div className="space-y-2">
+          <StatRow label={t("analytics.aiPerformance.leads")} value={aiVsHuman.humanLeads.toLocaleString()} />
+          <StatRow label={t("analytics.aiPerformance.converted")} value={aiVsHuman.humanConverted.toLocaleString()} />
+          <StatRow label={t("analytics.aiPerformance.rate")} value={`${aiVsHuman.humanRate}%`} valueClass={rateColorClass(aiVsHuman.humanRate)} />
+        </div>
+      </div>
+    </div>
+  </AnalyticsCard>;
+});

package/src/analytics/analytics-card.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { Card } from "@lindaui/ui/compound";
+import type { AnalyticsCardProps } from "./types";
+
+export function AnalyticsCard({ icon: Icon, title, action, children }: AnalyticsCardProps) {
+  return <Card className="border border-border bg-surface shadow-none">
+    <Card.Header className="flex items-center justify-between px-5 pt-5 pb-0">
+      <div className="flex items-center gap-2"><div className="flex h-7 w-7 items-center justify-center rounded-lg bg-accent/8"><Icon className="h-4 w-4 text-accent" /></div><h2 className="font-semibold text-foreground text-sm">{title}</h2></div>
+      {action}
+    </Card.Header>
+    <Card.Content className="px-5 pt-4 pb-5">{children}</Card.Content>
+  </Card>;
+}

package/src/analytics/analytics-skeleton.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { Skeleton } from "@lindaui/ui/compound";
+import { Building2, Loader2, Wifi } from "lucide-react";
+import { KPICard } from "../legacy-kpi-card";
+
+export function AnalyticsSkeleton() {
+  return <div className="space-y-6">
+    <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">{["a", "b", "c", "d"].map((k) => <KPICard icon={Building2} isLoading key={k} title="" value="" />)}</div>
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">{["e", "f", "g"].map((k) => <KPICard icon={Wifi} isLoading key={k} title="" value="" />)}</div>
+    <div className="grid gap-6 lg:grid-cols-2"><Skeleton className="h-72 w-full rounded-xl" /><Skeleton className="h-72 w-full rounded-xl" /></div>
+    <div className="grid gap-6 lg:grid-cols-2"><Skeleton className="h-64 w-full rounded-xl" /><Skeleton className="h-64 w-full rounded-xl" /></div>
+  </div>;
+}
+export function FetchingIndicator({ label }: { label: string }) { return <div className="flex items-center gap-1.5 text-muted text-xs"><Loader2 className="h-3 w-3 animate-spin" /><span>{label}</span></div>; }

package/src/analytics/entity-health-card.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Activity, CheckCircle2 } from "lucide-react";
+import { Fragment, memo, useMemo, type ReactNode } from "react";
+import { Badge, Divider } from "@lindaui/ui/compat";
+import { AnalyticsCard } from "./analytics-card";
+import type { EntityHealthCardProps, HealthEntity, HealthStatus } from "./types";
+
+const STATUS_CONFIG: Record<HealthStatus, { badgeColor: "success" | "warning" | "danger"; dotClass: string; bgClass: string; textClass: string; labelClass: string }> = {
+  at_risk: { badgeColor: "warning", bgClass: "bg-warning/8", dotClass: "bg-warning", labelClass: "text-warning/80", textClass: "text-warning" },
+  critical: { badgeColor: "danger", bgClass: "bg-danger/8", dotClass: "bg-danger", labelClass: "text-danger/80", textClass: "text-danger" },
+  healthy: { badgeColor: "success", bgClass: "bg-success/8", dotClass: "bg-success", labelClass: "text-success/80", textClass: "text-success" },
+};
+function ScoreBar({ count, total, colorClass }: { count: number; total: number; colorClass: string }) {
+  const pct = total > 0 ? Math.round((count / total) * 100) : 0;
+  return <div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-surface-secondary"><div className={`h-full rounded-full transition-all duration-500 ${colorClass}`} style={{ width: `${pct}%` }} /></div>;
+}
+export const EntityHealthCard = memo(({ entities, labels, renderEntityLink }: EntityHealthCardProps) => {
+  const total = entities.length;
+  const { healthy, atRisk, critical, alertEntities } = useMemo(() => ({
+    healthy: entities.filter((e) => e.status === "healthy").length,
+    atRisk: entities.filter((e) => e.status === "at_risk").length,
+    critical: entities.filter((e) => e.status === "critical").length,
+    alertEntities: entities.filter((e) => e.status !== "healthy"),
+  }), [entities]);
+  const renderLink = renderEntityLink ?? ((_entity: HealthEntity, children: ReactNode) => <div>{children}</div>);
+  const action = critical > 0 ? <Badge color="danger" size="sm" variant="flat">{labels.criticalBadge(critical)}</Badge> : undefined;
+  return <AnalyticsCard action={action} icon={Activity} title={labels.title}>
+    <div className="grid grid-cols-3 gap-3">
+      <div className={`rounded-xl p-3 ${STATUS_CONFIG.healthy.bgClass}`}><p className={`font-bold text-2xl tabular-nums ${STATUS_CONFIG.healthy.textClass}`}>{healthy}</p><p className={`mt-0.5 text-xs ${STATUS_CONFIG.healthy.labelClass}`}>{labels.healthy}</p><ScoreBar colorClass="bg-success" count={healthy} total={total} /></div>
+      <div className={`rounded-xl p-3 ${STATUS_CONFIG.at_risk.bgClass}`}><p className={`font-bold text-2xl tabular-nums ${STATUS_CONFIG.at_risk.textClass}`}>{atRisk}</p><p className={`mt-0.5 text-xs ${STATUS_CONFIG.at_risk.labelClass}`}>{labels.atRisk}</p><ScoreBar colorClass="bg-warning" count={atRisk} total={total} /></div>
+      <div className={`rounded-xl p-3 ${STATUS_CONFIG.critical.bgClass}`}><p className={`font-bold text-2xl tabular-nums ${STATUS_CONFIG.critical.textClass}`}>{critical}</p><p className={`mt-0.5 text-xs ${STATUS_CONFIG.critical.labelClass}`}>{labels.critical}</p><ScoreBar colorClass="bg-danger" count={critical} total={total} /></div>
+    </div>
+    {alertEntities.length === 0 ? <div className="mt-4 flex flex-col items-center justify-center gap-2 py-5"><CheckCircle2 className="h-8 w-8 text-success/60" /><p className="text-center text-muted text-xs">{labels.allHealthy}</p></div> : <>
+      <Divider className="my-4" />
+      <div className="max-h-[200px] space-y-0.5 overflow-y-auto">
+        {alertEntities.map((entity) => {
+          const cfg = STATUS_CONFIG[entity.status];
+          return <Fragment key={entity.id}>{renderLink(entity,
+            <div className="flex items-center justify-between rounded-lg px-3 py-2 transition-colors duration-100 hover:bg-surface-secondary">
+              <div className="flex min-w-0 items-center gap-2.5"><span className={`h-2 w-2 flex-shrink-0 rounded-full ${cfg.dotClass}`} /><span className="truncate font-medium text-foreground text-sm">{entity.name}</span></div>
+              <div className="ml-2 flex flex-shrink-0 items-center gap-2"><span className="font-mono text-muted text-xs tabular-nums">{labels.scoreLabel(entity.score)}</span><Badge color={cfg.badgeColor} size="sm" variant="flat">{labels.statusLabel(entity.status)}</Badge></div>
+            </div>
+          )}</Fragment>;
+        })}
+      </div>
+      <p className="mt-3 text-muted text-xs">{labels.idleNote}</p>
+    </>}
+  </AnalyticsCard>;
+});

package/src/analytics/status-distribution-chart.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useCallback } from "react";
+import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, Tooltip, type TooltipProps, XAxis, YAxis } from "recharts";
+import type { StatusDistributionChartProps } from "./types";
+
+export function StatusDistributionChart({ data, emptyLabel, valueLabel, height = 220 }: StatusDistributionChartProps) {
+  const chartData = [...data].sort((a, b) => b.count - a.count);
+  const formatTooltip = useCallback<NonNullable<TooltipProps["formatter"]>>((value) => [value, valueLabel], [valueLabel]);
+  if (!chartData.length) return <p className="py-8 text-center text-muted text-sm">{emptyLabel}</p>;
+  return <ResponsiveContainer height={height} width="100%">
+    <BarChart data={chartData} layout="vertical" margin={{ bottom: 0, left: 0, right: 16, top: 0 }}>
+      <CartesianGrid horizontal={false} stroke="var(--border)" strokeDasharray="3 3" />
+      <XAxis axisLine={false} tick={{ fill: "var(--muted)", fontSize: 11 }} tickLine={false} type="number" />
+      <YAxis axisLine={false} dataKey="label" tick={{ fill: "var(--muted)", fontSize: 11 }} tickLine={false} type="category" width={110} />
+      <Tooltip contentStyle={{ backgroundColor: "var(--surface)", border: "1px solid var(--border)", borderRadius: "8px", fontSize: "12px" }} cursor={{ fill: "var(--surface-secondary)" }} formatter={formatTooltip} />
+      <Bar dataKey="count" radius={[0, 4, 4, 0]}>{chartData.map((entry) => <Cell fill={entry.color} key={entry.key} />)}</Bar>
+    </BarChart>
+  </ResponsiveContainer>;
+}

package/src/analytics/time-range-picker.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { DateField, DateRangePicker, Label, RangeCalendar } from "@lindaui/ui/compound";
+import { getLocalTimeZone, today } from "@internationalized/date";
+import { type ComponentProps, memo, useState } from "react";
+import type { Preset, TimeRangePickerProps } from "./types";
+
+const PRESETS: Preset[] = ["24h", "7d", "30d", "custom"];
+// Preserve the public date types when HeroUI resolves its own date package copy.
+type DateRangePickerValueProps = Pick<ComponentProps<typeof DateRangePicker>, "maxValue" | "onChange" | "value">;
+export const TimeRangePicker = memo(({ preset, customRange, onPresetChange, onCustomRangeChange, t }: TimeRangePickerProps) => {
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  const maxDate = today(getLocalTimeZone());
+  function handlePresetChange(p: Preset) { onPresetChange(p); if (p === "custom") setIsPickerOpen(true); }
+  const handlePresetClick = (p: Preset) => () => handlePresetChange(p);
+  return <div className="flex items-center gap-3">
+    <div className="flex items-center gap-0.5 rounded-xl border border-border/60 bg-surface p-1 shadow-sm">
+      {PRESETS.map((p) => <button className={`cursor-pointer rounded-lg px-3.5 py-1.5 font-medium text-sm transition-all duration-150 ${preset === p ? "bg-accent text-accent-foreground shadow-sm" : "text-muted hover:bg-surface-secondary hover:text-foreground"}`} key={p} onClick={handlePresetClick(p)} type="button">{t(`analytics.timeRange.${p}`)}</button>)}
+    </div>
+    {preset === "custom" && <DateRangePicker className="max-w-xs" isOpen={isPickerOpen} maxValue={maxDate as unknown as DateRangePickerValueProps["maxValue"]} onChange={onCustomRangeChange as unknown as DateRangePickerValueProps["onChange"]} onOpenChange={setIsPickerOpen} value={customRange as unknown as DateRangePickerValueProps["value"]}>
+      <Label className="sr-only">{t("analytics.timeRange.label")}</Label>
+      <DateField.Group className="shadow-sm">
+        <DateField.InputContainer>
+          <DateField.Input slot="start">{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>
+          <DateRangePicker.RangeSeparator />
+          <DateField.Input slot="end">{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>
+        </DateField.InputContainer>
+        <DateField.Suffix><DateRangePicker.Trigger><DateRangePicker.TriggerIndicator /></DateRangePicker.Trigger></DateField.Suffix>
+      </DateField.Group>
+      <DateRangePicker.Popover><RangeCalendar aria-label={t("analytics.timeRange.label")} pageBehavior="single">
+        <RangeCalendar.Header>
+          <RangeCalendar.YearPickerTrigger><RangeCalendar.YearPickerTriggerHeading /><RangeCalendar.YearPickerTriggerIndicator /></RangeCalendar.YearPickerTrigger>
+          <RangeCalendar.NavButton slot="previous" /><RangeCalendar.NavButton slot="next" />
+        </RangeCalendar.Header>
+        <RangeCalendar.Grid>
+          <RangeCalendar.GridHeader>{(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}</RangeCalendar.GridHeader>
+          <RangeCalendar.GridBody>{(date) => <RangeCalendar.Cell date={date} />}</RangeCalendar.GridBody>
+        </RangeCalendar.Grid>
+        <RangeCalendar.YearPickerGrid><RangeCalendar.YearPickerGridBody>{({ year }) => <RangeCalendar.YearPickerCell year={year} />}</RangeCalendar.YearPickerGridBody></RangeCalendar.YearPickerGrid>
+      </RangeCalendar></DateRangePicker.Popover>
+    </DateRangePicker>}
+  </div>;
+});