@lindaui/blocks 0.4.2 → 0.5.0

package/dist/conversation-list-ekq2dzca.js

@@ -0,0 +1,133 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { InputGroup, ScrollShadow, Spinner } from '@lindaui/ui/compound';
+import { Search, X } from 'lucide-react';
+import { useCallback } from 'react';
+import { cn } from '@lindaui/ui/cn';
+import dayjs from 'dayjs';
+import { C as ConversationListItem } from './conversation-list-item-fy6t5af2.js';
+
+function TimeDivider({ label, className }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", className),
+        children: /*#__PURE__*/ jsx("span", {
+            className: "font-medium text-[11px] text-muted",
+            children: label
+        })
+    });
+}
+
+const TIME_GROUP_ORDER = [
+    "Hoy",
+    "Ayer",
+    "Esta semana",
+    "Este mes",
+    "Más antiguos"
+];
+function getTimeGroup(date) {
+    const now = dayjs();
+    const target = dayjs(date);
+    if (target.isSame(now, "day")) return "Hoy";
+    if (target.isSame(now.subtract(1, "day"), "day")) return "Ayer";
+    if (target.isAfter(now.subtract(7, "day"))) return "Esta semana";
+    if (target.isAfter(now.subtract(30, "day"))) return "Este mes";
+    return "Más antiguos";
+}
+function groupByTime(items, getDate) {
+    const grouped = {};
+    for (const group of TIME_GROUP_ORDER)grouped[group] = [];
+    items.forEach((item)=>grouped[getTimeGroup(getDate(item))].push(item));
+    return grouped;
+}
+
+function ConversationList({ items, searchValue, onSearchChange, searchPlaceholder, filters, labels, isLoading = false, emptyMessage, onItemSelect, renderAvatar, renderItems }) {
+    const grouped = groupByTime(items, (item)=>item.timestamp ?? new Date());
+    const handleSearchChange = useCallback((e)=>onSearchChange(e.target.value), [
+        onSearchChange
+    ]);
+    const handleClearSearch = useCallback(()=>onSearchChange(""), [
+        onSearchChange
+    ]);
+    const handleItemSelect = useCallback((id)=>()=>onItemSelect(id), [
+        onItemSelect
+    ]);
+    const renderItem = (item)=>/*#__PURE__*/ jsx(ConversationListItem, {
+            avatar: renderAvatar?.(item),
+            emptyPreview: labels.emptyPreview,
+            item: item,
+            onClick: handleItemSelect(item.id)
+        }, item.id);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex h-full flex-col bg-background",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "space-y-3 border-border border-b p-4",
+                children: [
+                    /*#__PURE__*/ jsxs(InputGroup, {
+                        className: "w-full rounded-lg",
+                        children: [
+                            /*#__PURE__*/ jsx(InputGroup.Prefix, {
+                                children: /*#__PURE__*/ jsx(Search, {
+                                    className: "h-4 w-4 text-muted"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(InputGroup.Input, {
+                                className: "text-sm",
+                                onChange: handleSearchChange,
+                                placeholder: searchPlaceholder,
+                                value: searchValue
+                            }),
+                            searchValue && /*#__PURE__*/ jsx(InputGroup.Suffix, {
+                                children: /*#__PURE__*/ jsx("button", {
+                                    className: "text-muted hover:text-muted",
+                                    onClick: handleClearSearch,
+                                    type: "button",
+                                    children: /*#__PURE__*/ jsx(X, {
+                                        className: "h-4 w-4"
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    filters
+                ]
+            }),
+            /*#__PURE__*/ jsxs(ScrollShadow, {
+                className: "flex-1 overflow-y-auto",
+                children: [
+                    isLoading && /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center justify-center gap-2 py-8",
+                        children: [
+                            /*#__PURE__*/ jsx(Spinner, {
+                                size: "sm"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-muted text-sm",
+                                children: labels.loading
+                            })
+                        ]
+                    }),
+                    !isLoading && items.length === 0 && /*#__PURE__*/ jsx("div", {
+                        className: "flex flex-col items-center justify-center px-4 py-12 text-center",
+                        children: /*#__PURE__*/ jsx("p", {
+                            className: "text-muted text-sm",
+                            children: emptyMessage
+                        })
+                    }),
+                    !isLoading && items.length > 0 && (renderItems ? renderItems(items, renderItem) : /*#__PURE__*/ jsx("div", {
+                        children: TIME_GROUP_ORDER.map((timeGroup)=>grouped[timeGroup].length === 0 ? null : /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx(TimeDivider, {
+                                        label: labels.periods[timeGroup]
+                                    }),
+                                    grouped[timeGroup].map(renderItem)
+                                ]
+                            }, timeGroup))
+                    }))
+                ]
+            })
+        ]
+    });
+}
+
+export { ConversationList as C };

package/dist/conversation-list-item-fy6t5af2.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { formatRelativeTime, cn } from '@lindaui/ui/compat';
+
+const ConversationListItem = /*#__PURE__*/ memo(({ item, onClick, avatar, emptyPreview })=>/*#__PURE__*/ jsx("button", {
+        className: cn("w-full cursor-pointer px-4 py-3 transition-colors", "md:hover:bg-surface-secondary", item.isSelected && "bg-blue-50 dark:bg-blue-950/20"),
+        onClick: onClick,
+        type: "button",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "flex items-start gap-3",
+            children: [
+                avatar,
+                /*#__PURE__*/ jsxs("div", {
+                    className: "min-w-0 flex-1 text-left",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "mb-0.5 flex items-center justify-between gap-2",
+                            children: [
+                                /*#__PURE__*/ jsx("h4", {
+                                    className: "truncate font-semibold text-foreground",
+                                    children: item.title
+                                }),
+                                item.timestamp && /*#__PURE__*/ jsx("span", {
+                                    className: "flex-shrink-0 text-muted text-xs",
+                                    children: formatRelativeTime(item.timestamp)
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex items-center justify-between gap-2",
+                            children: [
+                                /*#__PURE__*/ jsx("p", {
+                                    className: "truncate text-muted text-sm",
+                                    children: item.preview ?? emptyPreview
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex flex-shrink-0 items-center gap-1.5",
+                                    children: [
+                                        item.badge,
+                                        item.unreadCount ? /*#__PURE__*/ jsx("span", {
+                                            className: "inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 font-semibold text-accent-foreground text-xs",
+                                            children: item.unreadCount
+                                        }) : null
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    }));
+
+export { ConversationListItem as C };

package/dist/conversation-thread-c60431oa.js

@@ -0,0 +1,205 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ScrollShadow, Spinner } from '@lindaui/ui/compound';
+import { cn } from '@lindaui/ui/cn';
+import dayjs from 'dayjs';
+import { AlertCircle } from 'lucide-react';
+import { useRef, useMemo, useCallback, useLayoutEffect, useEffect } from 'react';
+import { isToday, isYesterday } from '@lindaui/ui/compat';
+import { M as MessageBubble } from './message-bubble-odjvhroq.js';
+
+function DateDivider({ date }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex justify-center py-2",
+        children: /*#__PURE__*/ jsx("span", {
+            className: "rounded-lg bg-surface-secondary px-3 py-1 text-muted text-xs shadow-sm dark:bg-surface-secondary/50",
+            children: isToday(date) ? "Hoy" : isYesterday(date) ? "Ayer" : dayjs(date).format("DD/MM/YYYY")
+        })
+    });
+}
+
+const DEFAULT_BACKGROUND = {
+    dark: "/images/chat-bg-dark.png",
+    light: "/images/chat-bg-light.png"
+};
+function ConversationThread({ messages, isLoading = false, isError = false, labels, backgroundImage, showPollingFallback = false, renderMessages }) {
+    const scrollRef = useRef(null);
+    const messageListRef = useRef(null);
+    const groupedMessages = useMemo(()=>{
+        const groups = [];
+        let currentDay = "";
+        for (const msg of messages){
+            const day = dayjs(msg.timestamp).format("YYYY-MM-DD");
+            if (day === currentDay) groups.at(-1)?.messages.push(msg);
+            else {
+                currentDay = day;
+                groups.push({
+                    date: msg.timestamp,
+                    messages: [
+                        msg
+                    ]
+                });
+            }
+        }
+        return groups;
+    }, [
+        messages
+    ]);
+    const hasScrolledOnLoad = useRef(false);
+    const firstId = messages.at(0)?.id ?? "";
+    const prevFirstIdRef = useRef(firstId);
+    const scrollToBottom = useCallback((behavior = "smooth")=>{
+        const el = scrollRef.current;
+        if (!el) return;
+        if (behavior === "auto") {
+            el.scrollTop = el.scrollHeight;
+            return;
+        }
+        el.scrollTo({
+            behavior,
+            top: el.scrollHeight
+        });
+    }, []);
+    useLayoutEffect(()=>{
+        if (prevFirstIdRef.current !== firstId) {
+            prevFirstIdRef.current = firstId;
+            hasScrolledOnLoad.current = false;
+        }
+        if (isLoading || messages.length === 0 || hasScrolledOnLoad.current) return;
+        const el = scrollRef.current;
+        const listEl = messageListRef.current;
+        if (!el || !listEl) return;
+        let settleTimeout = null;
+        let settled = false;
+        const scrollNow = ()=>{
+            el.scrollTop = el.scrollHeight;
+        };
+        const scheduleSettle = ()=>{
+            if (settleTimeout) clearTimeout(settleTimeout);
+            settleTimeout = setTimeout(()=>{
+                settled = true;
+                hasScrolledOnLoad.current = true;
+                resizeObserver.disconnect();
+                mutationObserver.disconnect();
+            }, 250);
+        };
+        scrollNow();
+        scheduleSettle();
+        const resizeObserver = new ResizeObserver(()=>{
+            if (!settled) {
+                scrollNow();
+                scheduleSettle();
+            }
+        });
+        const mutationObserver = new MutationObserver(()=>{
+            if (!settled) {
+                scrollNow();
+                scheduleSettle();
+            }
+        });
+        resizeObserver.observe(listEl);
+        mutationObserver.observe(listEl, {
+            childList: true,
+            subtree: true
+        });
+        return ()=>{
+            if (settleTimeout) clearTimeout(settleTimeout);
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [
+        isLoading,
+        messages.length,
+        firstId
+    ]);
+    const messageCount = messages.length;
+    const prevMessageCount = useRef(messageCount);
+    useEffect(()=>{
+        if (messageCount > prevMessageCount.current) requestAnimationFrame(()=>scrollToBottom("smooth"));
+        prevMessageCount.current = messageCount;
+    }, [
+        messageCount,
+        scrollToBottom
+    ]);
+    const bg = backgroundImage === undefined ? DEFAULT_BACKGROUND : backgroundImage;
+    const renderMessage = (message)=>/*#__PURE__*/ jsx(MessageBubble, {
+            message: message
+        }, message.id);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("relative flex h-full flex-col", bg ? "bg-[#efeae2] dark:bg-[#0b141a]" : "bg-background"),
+        children: [
+            bg && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "pointer-events-none absolute inset-0 bg-contain opacity-15 dark:hidden",
+                        style: {
+                            backgroundImage: `url('${bg.light}')`
+                        }
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "pointer-events-none absolute inset-0 hidden bg-contain opacity-15 dark:block",
+                        style: {
+                            backgroundImage: `url('${bg.dark}')`
+                        }
+                    })
+                ]
+            }),
+            showPollingFallback && labels.pollingFallback && /*#__PURE__*/ jsx("div", {
+                className: "flex items-center justify-center py-1.5 text-muted text-xs",
+                children: labels.pollingFallback
+            }),
+            /*#__PURE__*/ jsxs(ScrollShadow, {
+                className: "relative flex-1 overflow-y-auto px-4 pt-4 pb-20",
+                ref: scrollRef,
+                children: [
+                    isLoading && /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center justify-center gap-2 py-8",
+                        children: [
+                            /*#__PURE__*/ jsx(Spinner, {
+                                size: "sm"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-muted text-sm",
+                                children: labels.loading
+                            })
+                        ]
+                    }),
+                    isError && /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center justify-center gap-2 py-8 text-danger",
+                        children: [
+                            /*#__PURE__*/ jsx(AlertCircle, {
+                                className: "h-5 w-5"
+                            }),
+                            /*#__PURE__*/ jsx("p", {
+                                className: "text-sm",
+                                children: labels.errorLoading
+                            })
+                        ]
+                    }),
+                    !isLoading && messages.length === 0 && /*#__PURE__*/ jsx("div", {
+                        className: "flex items-center justify-center py-12 text-center",
+                        children: /*#__PURE__*/ jsx("p", {
+                            className: "text-muted text-sm",
+                            children: labels.noMessages
+                        })
+                    }),
+                    !isLoading && messages.length > 0 && /*#__PURE__*/ jsx("div", {
+                        className: "space-y-3",
+                        ref: messageListRef,
+                        children: renderMessages ? renderMessages(messages, renderMessage) : groupedMessages.map((group)=>/*#__PURE__*/ jsxs("div", {
+                                className: "space-y-3",
+                                children: [
+                                    /*#__PURE__*/ jsx(DateDivider, {
+                                        date: group.date
+                                    }),
+                                    group.messages.map(renderMessage)
+                                ]
+                            }, String(group.date)))
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+export { ConversationThread as C, DateDivider as D };

package/dist/entity-card.d.ts

@@ -0,0 +1,17 @@
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import type { ReactNode } from "react";
+export interface EntityCardProps<Entity extends object> {
+    id: UniqueIdentifier;
+    entity: Entity;
+    isDragging?: boolean;
+    onActivate?: (entity: Entity) => void;
+    cardClassName?: string;
+    badges?: ReactNode;
+    time?: ReactNode;
+    avatar?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+}
+/** Sortable presentation only: metadata, urgency and navigation belong to the caller. */
+export declare function EntityCard<Entity extends object>({ id, entity, isDragging, onActivate, cardClassName, badges, time, avatar, title, subtitle, }: EntityCardProps<Entity>): import("react").JSX.Element;
+//# sourceMappingURL=entity-card.d.ts.map

package/dist/entity-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-card.d.ts","sourceRoot":"","sources":["../src/entity-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe,CAAC,MAAM,SAAS,MAAM;IACpD,EAAE,EAAE,gBAAgB,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,yFAAyF;AACzF,wBAAgB,UAAU,CAAC,MAAM,SAAS,MAAM,EAAE,EAChD,EAAE,EACF,MAAM,EACN,UAAkB,EAClB,UAAU,EACV,aAAa,EACb,MAAM,EACN,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,GACT,EAAE,eAAe,CAAC,MAAM,CAAC,+BAuCzB"}

package/dist/entity-card.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Card } from '@lindaui/ui/compound';
+import { cn } from '@lindaui/ui/cn';
+
+/** Sortable presentation only: metadata, urgency and navigation belong to the caller. */ function EntityCard({ id, entity, isDragging = false, onActivate, cardClassName, badges, time, avatar, title, subtitle }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging: isSortableDragging } = useSortable({
+        data: entity,
+        id
+    });
+    const isCurrentlyDragging = isDragging || isSortableDragging;
+    return /*#__PURE__*/ jsx("div", {
+        ref: setNodeRef,
+        style: {
+            transform: CSS.Transform.toString(transform),
+            transition
+        },
+        ...attributes,
+        ...listeners,
+        className: cn("touch-none", isCurrentlyDragging && "scale-105 opacity-50"),
+        children: /*#__PURE__*/ jsx(Card, {
+            className: cn("cursor-grab border-none bg-surface transition-all hover:bg-surface-secondary active:cursor-grabbing", "h-full min-w-full shadow-sm hover:shadow-md", cardClassName),
+            onClick: ()=>{
+                if (!isCurrentlyDragging) onActivate?.(entity);
+            },
+            children: /*#__PURE__*/ jsxs(Card.Content, {
+                className: "flex min-h-[96px] min-w-full flex-col justify-between p-3",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "mb-2 flex items-start justify-between",
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "flex flex-1 flex-wrap items-center gap-1 overflow-hidden",
+                                children: badges
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "flex items-center gap-1 text-[10px] text-muted",
+                                children: time
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "mb-2 flex items-center gap-3",
+                        children: [
+                            avatar,
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "min-w-0 flex-1",
+                                children: [
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: "truncate font-semibold text-sm",
+                                        children: title
+                                    }),
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: "truncate text-[10px] text-muted",
+                                        children: subtitle
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+}
+
+export { EntityCard };

package/dist/entity-health-card-ggnmrtrq.js

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