@lindaui/blocks 0.4.2 → 0.5.1

package/dist/time-range-picker-mu38hul4.js

@@ -0,0 +1,123 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { DateRangePicker, Label, DateField, RangeCalendar } from '@lindaui/ui/compound';
+import { today, getLocalTimeZone } from '@internationalized/date';
+import { memo, useState } from 'react';
+
+const PRESETS = [
+    "24h",
+    "7d",
+    "30d",
+    "custom"
+];
+const TimeRangePicker = /*#__PURE__*/ memo(({ preset, customRange, onPresetChange, onCustomRangeChange, t })=>{
+    const [isPickerOpen, setIsPickerOpen] = useState(false);
+    const maxDate = today(getLocalTimeZone());
+    function handlePresetChange(p) {
+        onPresetChange(p);
+        if (p === "custom") setIsPickerOpen(true);
+    }
+    const handlePresetClick = (p)=>()=>handlePresetChange(p);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex items-center gap-3",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "flex items-center gap-0.5 rounded-xl border border-border/60 bg-surface p-1 shadow-sm",
+                children: PRESETS.map((p)=>/*#__PURE__*/ jsx("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"}`,
+                        onClick: handlePresetClick(p),
+                        type: "button",
+                        children: t(`analytics.timeRange.${p}`)
+                    }, p))
+            }),
+            preset === "custom" && /*#__PURE__*/ jsxs(DateRangePicker, {
+                className: "max-w-xs",
+                isOpen: isPickerOpen,
+                maxValue: maxDate,
+                onChange: onCustomRangeChange,
+                onOpenChange: setIsPickerOpen,
+                value: customRange,
+                children: [
+                    /*#__PURE__*/ jsx(Label, {
+                        className: "sr-only",
+                        children: t("analytics.timeRange.label")
+                    }),
+                    /*#__PURE__*/ jsxs(DateField.Group, {
+                        className: "shadow-sm",
+                        children: [
+                            /*#__PURE__*/ jsxs(DateField.InputContainer, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DateField.Input, {
+                                        slot: "start",
+                                        children: (segment)=>/*#__PURE__*/ jsx(DateField.Segment, {
+                                                segment: segment
+                                            })
+                                    }),
+                                    /*#__PURE__*/ jsx(DateRangePicker.RangeSeparator, {}),
+                                    /*#__PURE__*/ jsx(DateField.Input, {
+                                        slot: "end",
+                                        children: (segment)=>/*#__PURE__*/ jsx(DateField.Segment, {
+                                                segment: segment
+                                            })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(DateField.Suffix, {
+                                children: /*#__PURE__*/ jsx(DateRangePicker.Trigger, {
+                                    children: /*#__PURE__*/ jsx(DateRangePicker.TriggerIndicator, {})
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(DateRangePicker.Popover, {
+                        children: /*#__PURE__*/ jsxs(RangeCalendar, {
+                            "aria-label": t("analytics.timeRange.label"),
+                            pageBehavior: "single",
+                            children: [
+                                /*#__PURE__*/ jsxs(RangeCalendar.Header, {
+                                    children: [
+                                        /*#__PURE__*/ jsxs(RangeCalendar.YearPickerTrigger, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(RangeCalendar.YearPickerTriggerHeading, {}),
+                                                /*#__PURE__*/ jsx(RangeCalendar.YearPickerTriggerIndicator, {})
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx(RangeCalendar.NavButton, {
+                                            slot: "previous"
+                                        }),
+                                        /*#__PURE__*/ jsx(RangeCalendar.NavButton, {
+                                            slot: "next"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(RangeCalendar.Grid, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(RangeCalendar.GridHeader, {
+                                            children: (day)=>/*#__PURE__*/ jsx(RangeCalendar.HeaderCell, {
+                                                    children: day
+                                                })
+                                        }),
+                                        /*#__PURE__*/ jsx(RangeCalendar.GridBody, {
+                                            children: (date)=>/*#__PURE__*/ jsx(RangeCalendar.Cell, {
+                                                    date: date
+                                                })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(RangeCalendar.YearPickerGrid, {
+                                    children: /*#__PURE__*/ jsx(RangeCalendar.YearPickerGridBody, {
+                                        children: ({ year })=>/*#__PURE__*/ jsx(RangeCalendar.YearPickerCell, {
+                                                year: year
+                                            })
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+});
+
+export { TimeRangePicker as T };

package/dist/top-entities-table-o7xzpq96.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { BarChart2 } from 'lucide-react';
+import { Badge } from '@lindaui/ui/compat';
+
+function TopEntitiesTable({ columns, rows, emptyLabel, showRank = true }) {
+    if (!rows.length) return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col items-center justify-center gap-2 py-12",
+        children: [
+            /*#__PURE__*/ jsx(BarChart2, {
+                className: "h-8 w-8 text-muted"
+            }),
+            /*#__PURE__*/ jsx("p", {
+                className: "text-muted text-sm",
+                children: emptyLabel
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: "overflow-x-auto",
+        children: /*#__PURE__*/ jsxs("table", {
+            className: "w-full text-sm",
+            children: [
+                /*#__PURE__*/ jsx("thead", {
+                    children: /*#__PURE__*/ jsxs("tr", {
+                        className: "border-border border-b",
+                        children: [
+                            showRank ? /*#__PURE__*/ jsx("th", {
+                                className: "pr-3 pb-3 text-left font-medium text-muted text-xs uppercase tracking-wider",
+                                children: "#"
+                            }) : null,
+                            columns.map((col)=>/*#__PURE__*/ jsx("th", {
+                                    className: `pr-3 pb-3 font-medium text-muted text-xs uppercase tracking-wider ${col.align === "right" ? "text-right" : "text-left"}`,
+                                    children: col.label
+                                }, col.key))
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx("tbody", {
+                    className: "divide-y divide-border",
+                    children: rows.map((row, i)=>/*#__PURE__*/ jsxs("tr", {
+                            className: "group transition-colors duration-100 hover:bg-surface-secondary/60",
+                            children: [
+                                showRank ? /*#__PURE__*/ jsx("td", {
+                                    className: "py-3 pr-3",
+                                    children: /*#__PURE__*/ jsx("span", {
+                                        className: "font-mono text-muted text-xs tabular-nums",
+                                        children: String(i + 1).padStart(2, "0")
+                                    })
+                                }) : null,
+                                row.cells.map((cell, ci)=>/*#__PURE__*/ jsx(Cell, {
+                                        cell: cell
+                                    }, columns[ci]?.key ?? String(ci)))
+                            ]
+                        }, row.id))
+                })
+            ]
+        })
+    });
+}
+function Cell({ cell }) {
+    const isRight = cell.align === "right";
+    if (cell.badge) return /*#__PURE__*/ jsx("td", {
+        className: `py-3 ${isRight ? "text-right" : "pr-3"}`,
+        children: /*#__PURE__*/ jsx(Badge, {
+            color: cell.badge.color,
+            size: "sm",
+            variant: "flat",
+            children: cell.badge.label
+        })
+    });
+    return /*#__PURE__*/ jsx("td", {
+        className: `py-3 pr-3 text-sm ${isRight ? "text-right text-muted tabular-nums" : "font-medium text-foreground"}`,
+        children: cell.value
+    });
+}
+
+export { TopEntitiesTable as T };

package/dist/use-keyboard-navigation-he1xmriz.js

@@ -0,0 +1,52 @@
+'use client';
+import { useEffect } from 'react';
+
+/** Preserve horizontal board navigation, without intercepting text editing. */ function useKeyboardNavigation(scrollRef, columnWidth = 320) {
+    useEffect(()=>{
+        const element = scrollRef.current;
+        if (!element) return;
+        const handleKeyDown = (event)=>{
+            const target = event.target;
+            if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+                return;
+            }
+            switch(event.key){
+                case "ArrowLeft":
+                    event.preventDefault();
+                    element.scrollBy({
+                        behavior: "smooth",
+                        left: -columnWidth
+                    });
+                    break;
+                case "ArrowRight":
+                    event.preventDefault();
+                    element.scrollBy({
+                        behavior: "smooth",
+                        left: columnWidth
+                    });
+                    break;
+                case "Home":
+                    event.preventDefault();
+                    element.scrollTo({
+                        behavior: "smooth",
+                        left: 0
+                    });
+                    break;
+                case "End":
+                    event.preventDefault();
+                    element.scrollTo({
+                        behavior: "smooth",
+                        left: element.scrollWidth
+                    });
+                    break;
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return ()=>window.removeEventListener("keydown", handleKeyDown);
+    }, [
+        scrollRef,
+        columnWidth
+    ]);
+}
+
+export { useKeyboardNavigation as u };

package/dist/whatsapp-audio-player-nooty6jb.js

@@ -0,0 +1,277 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+
+/** URL-seeded waveform: deterministic across renders and server/client. */ function generateWaveform(seed, count = 60) {
+    let h = 0;
+    for(let i = 0; i < seed.length; i += 1)h = Math.imul(31, h) + seed.charCodeAt(i) | 0;
+    return Array.from({
+        length: count
+    }, ()=>{
+        h = Math.imul(1_664_525, h) + 1_013_904_223 | 0;
+        return 0.12 + (h >>> 0) / 4_294_967_295 * 0.88;
+    });
+}
+function formatSeconds(s) {
+    if (!Number.isFinite(s) || s < 0) return "0:00";
+    return `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, "0")}`;
+}
+function MicIcon({ color }) {
+    return /*#__PURE__*/ jsxs("svg", {
+        "aria-hidden": "true",
+        fill: color,
+        focusable: "false",
+        height: "18",
+        role: "img",
+        viewBox: "0 0 24 24",
+        width: "18",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "Micrófono"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M12 1a4 4 0 0 1 4 4v7a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v7a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zm-7 8a1 1 0 0 1 .993.883L6 12a6 6 0 0 0 11.996.2L18 12a1 1 0 0 1 2 0 8 8 0 0 1-7 7.938V21h2a1 1 0 0 1 0 2H9a1 1 0 0 1 0-2h2v-1.062A8 8 0 0 1 4 12a1 1 0 0 1 1-1z"
+            })
+        ]
+    });
+}
+function PlayIcon({ color }) {
+    return /*#__PURE__*/ jsxs("svg", {
+        "aria-hidden": "true",
+        fill: color,
+        focusable: "false",
+        height: "16",
+        role: "img",
+        viewBox: "0 0 24 24",
+        width: "16",
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "Reproducir"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M8 5.14v14l11-7-11-7z"
+            })
+        ]
+    });
+}
+function PauseIcon({ color }) {
+    return /*#__PURE__*/ jsxs("svg", {
+        "aria-hidden": "true",
+        fill: color,
+        focusable: "false",
+        height: "16",
+        role: "img",
+        viewBox: "0 0 24 24",
+        width: "16",
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "Pausar"
+            }),
+            /*#__PURE__*/ jsx("rect", {
+                height: "14",
+                rx: "1.5",
+                width: "4",
+                x: "6",
+                y: "5"
+            }),
+            /*#__PURE__*/ jsx("rect", {
+                height: "14",
+                rx: "1.5",
+                width: "4",
+                x: "14",
+                y: "5"
+            })
+        ]
+    });
+}
+function SpinnerIcon({ color }) {
+    return /*#__PURE__*/ jsxs("svg", {
+        "aria-hidden": "true",
+        className: "animate-spin",
+        fill: "none",
+        focusable: "false",
+        height: "16",
+        role: "img",
+        stroke: color,
+        strokeWidth: "2.5",
+        viewBox: "0 0 24 24",
+        width: "16",
+        children: [
+            /*#__PURE__*/ jsx("title", {
+                children: "Cargando"
+            }),
+            /*#__PURE__*/ jsx("circle", {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: color
+            }),
+            /*#__PURE__*/ jsx("path", {
+                className: "opacity-75",
+                d: "M4 12a8 8 0 018-8",
+                stroke: color
+            })
+        ]
+    });
+}
+function ButtonIcon({ isLoading, isPlaying, color }) {
+    if (isLoading) return /*#__PURE__*/ jsx(SpinnerIcon, {
+        color: color
+    });
+    return isPlaying ? /*#__PURE__*/ jsx(PauseIcon, {
+        color: color
+    }) : /*#__PURE__*/ jsx(PlayIcon, {
+        color: color
+    });
+}
+/** Voice-note playback, buffering, duration tracking and click-to-seek. */ function WhatsAppAudioPlayer({ src, isBot = false }) {
+    const audioRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [isLoading, setIsLoading] = useState(false);
+    const bars = useMemo(()=>generateWaveform(src), [
+        src
+    ]);
+    useEffect(()=>{
+        const audio = audioRef.current;
+        if (!audio) return;
+        const onTimeUpdate = ()=>{
+            setCurrentTime(audio.currentTime);
+            setProgress(audio.duration > 0 ? audio.currentTime / audio.duration : 0);
+        };
+        const onDurationChange = ()=>{
+            if (Number.isFinite(audio.duration)) setDuration(audio.duration);
+        };
+        const onEnded = ()=>{
+            setIsPlaying(false);
+            setProgress(0);
+            setCurrentTime(0);
+            audio.currentTime = 0;
+        };
+        const onWaiting = ()=>setIsLoading(true);
+        const onCanPlay = ()=>setIsLoading(false);
+        const onPlay = ()=>setIsPlaying(true);
+        const onPause = ()=>setIsPlaying(false);
+        audio.addEventListener("timeupdate", onTimeUpdate);
+        audio.addEventListener("durationchange", onDurationChange);
+        audio.addEventListener("loadedmetadata", onDurationChange);
+        audio.addEventListener("ended", onEnded);
+        audio.addEventListener("waiting", onWaiting);
+        audio.addEventListener("canplay", onCanPlay);
+        audio.addEventListener("play", onPlay);
+        audio.addEventListener("pause", onPause);
+        return ()=>{
+            audio.removeEventListener("timeupdate", onTimeUpdate);
+            audio.removeEventListener("durationchange", onDurationChange);
+            audio.removeEventListener("loadedmetadata", onDurationChange);
+            audio.removeEventListener("ended", onEnded);
+            audio.removeEventListener("waiting", onWaiting);
+            audio.removeEventListener("canplay", onCanPlay);
+            audio.removeEventListener("play", onPlay);
+            audio.removeEventListener("pause", onPause);
+        };
+    }, []);
+    const togglePlay = useCallback(async ()=>{
+        const audio = audioRef.current;
+        if (!audio) return;
+        if (isPlaying) audio.pause();
+        else await audio.play();
+    }, [
+        isPlaying
+    ]);
+    const handleWaveformClick = useCallback((e)=>{
+        const audio = audioRef.current;
+        if (!audio || !Number.isFinite(audio.duration)) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        audio.currentTime = ratio * audio.duration;
+        setProgress(ratio);
+    }, []);
+    const colors = isBot ? {
+        barPlayed: "rgba(255,255,255,0.9)",
+        barUnplayed: "rgba(255,255,255,0.32)",
+        btnBg: "rgba(0,0,0,0.15)",
+        btnIcon: "#ffffff",
+        micBg: "rgba(0,0,0,0.12)",
+        micIcon: "rgba(255,255,255,0.85)",
+        timer: "rgba(255,255,255,0.7)"
+    } : {
+        barPlayed: "#00a884",
+        barUnplayed: "#c8d3d8",
+        btnBg: "#00a884",
+        btnIcon: "#ffffff",
+        micBg: "#d9fdd3",
+        micIcon: "#00a884",
+        timer: "#8696a0"
+    };
+    const displayTime = isPlaying || progress > 0 ? currentTime : duration;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex w-full items-center gap-2 py-0.5 sm:min-w-[440px]",
+        children: [
+            /*#__PURE__*/ jsx("audio", {
+                preload: "metadata",
+                ref: audioRef,
+                src: src
+            }),
+            /*#__PURE__*/ jsx("div", {
+                "aria-hidden": "true",
+                className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full",
+                style: {
+                    backgroundColor: colors.micBg
+                },
+                children: /*#__PURE__*/ jsx(MicIcon, {
+                    color: colors.micIcon
+                })
+            }),
+            /*#__PURE__*/ jsx("button", {
+                "aria-label": isPlaying ? "Pausar audio" : "Reproducir audio",
+                className: "flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full transition-opacity hover:opacity-80 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-1",
+                onClick: togglePlay,
+                style: {
+                    backgroundColor: colors.btnBg
+                },
+                type: "button",
+                children: /*#__PURE__*/ jsx(ButtonIcon, {
+                    color: colors.btnIcon,
+                    isLoading: isLoading,
+                    isPlaying: isPlaying
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex min-w-0 flex-1 flex-col gap-1",
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        "aria-label": "Cambiar posición del audio",
+                        className: "flex h-8 w-full items-center gap-[2px] focus:outline-none",
+                        onClick: handleWaveformClick,
+                        type: "button",
+                        children: bars.map((height, i)=>/*#__PURE__*/ jsx("span", {
+                                className: "rounded-full transition-colors duration-75",
+                                style: {
+                                    backgroundColor: i / bars.length < progress ? colors.barPlayed : colors.barUnplayed,
+                                    flex: "1",
+                                    height: `${Math.round(height * 28)}px`,
+                                    maxHeight: "28px",
+                                    minHeight: "3px",
+                                    width: "2px"
+                                }
+                            }, i))
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "select-none text-[10px] leading-none tabular-nums",
+                        style: {
+                            color: colors.timer
+                        },
+                        children: formatSeconds(displayTime)
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+export { WhatsAppAudioPlayer as W };

package/llms.txt

@@ -2,7 +2,8 @@
 
 > Composed UI sections built on **@lindaui/ui** primitives — auth forms, master-detail,
 > lists, dialogs, media viewers, and charts. Importable npm package (NOT a copy-paste
-> registry). Each block has its OWN flat API and does not leak HeroUI/RAC types.
+> registry). Existing flat APIs are unchanged; opt-in compatibility namespaces
+> have separate, explicit presentation contracts.
 > This file is for coding agents: every entry, import path, and public API.
 
 All blocks are generic, controlled/mobile-first, and contain zero data-fetching, no
@@ -15,14 +16,96 @@ type of any export, read `node_modules/@lindaui/blocks/dist/<name>.d.ts`.
 pnpm add @lindaui/blocks @lindaui/ui @lindaui/tokens
 ```
 
-Peers you provide: `react >=19`, `react-dom >=19`, `react-hook-form >=7`, `recharts >=3`
-(only for chart blocks), plus `@lindaui/ui` and `@lindaui/tokens`. Import the CSS once
+Peers you provide: `react >=19`, `react-dom >=19`, `react-hook-form >=7`, `lucide-react >=0.4`, `recharts >=3`
+(only for chart blocks), plus `@lindaui/ui >=0.5.0` and `@lindaui/tokens >=0.4.0`. Import the CSS once
 at app root: `import "@lindaui/tokens/css";`.
 
+This is the blocks 0.5.0 migration surface. Earlier UI 0.4.1 lacks `/compound`
+and `/compat`; earlier tokens 0.3.1 lacks the new style entries/utility layer.
+The peer floors intentionally reject those published versions.
+
 ## Import convention
 
 One block per import path: `@lindaui/blocks/<name>`.
 
+## New controlled application blocks
+
+- `/app-shell`: `AppShell` takes `brand`, `navItems`, `children`, translated
+  `labels`, collapsed/visiting flags and sidebar/header/content slots. Inject
+  `renderLink`/`renderImage` for framework integration. `navItems` supply stable
+  keys, labels, URLs, icons, active/mobile/center-button flags and optional actions.
+  `AppShellFooter` is exported from the same entry, not a separate subpath.
+- `/entity-switcher`: `entities`, `currentEntity`, `onSelect`, `labels`, optional
+  actions/avatar renderer and collapsed/visiting presentation.
+- `/command-palette`: controlled `isOpen`, `items`, `onClose`, `onSelect`,
+  recent IDs, labels and optional avatar/empty-state renderers.
+- `/connection-panel`: `state` is checking/disconnected/generating,
+  awaiting_scan (`qrCode` slot, optional `qrFormat`), or connected (`content`).
+  Supply `labels`, `onConnect`/`onRefreshQR` promises, optional error/isActive
+  and QR expiry. QR timers are presentation state; auth/auto-connect stays in app.
+  `ConnectedPanel` is exported from this entry for detail/disconnect presentation.
+- `/channel-settings`: `channels`, navigationLabel, selected/defaultSelected,
+  onSelect and optional class names; channels supply their own content.
+- `/settings-layout`: controlled `sections`, `selected`, `onSelect`, `panels`,
+  `navigationLabel`, optional footer/title/compact/idPrefix. Panels stay mounted.
+- `/save-bar`: `dirty`, `saving`, `form` id, translated labels, optional embedded.
+- `/stepper`: `value`, accessible `label`, optional stepLabel/description/complete,
+  `variant="steps"|"compact"`, className and formatValue. Only presents percentage;
+  the consumer calculates progress/completion. Preserves both original anatomies.
+- `/filter-bar`: searchValue/onSearchChange, controlled selectedFilters and
+  selectedSort plus options/callbacks/labels. Optional renderSearchInput and
+  renderIconButton preserve source-specific presentations. Does not filter data.
+- `/source-selector`: controlled source/options/onSourceChange, isLoading/ariaLabel.
+- `/kanban-board`: entities/columns, getEntityId/getColumnId, renderCard,
+  onColumnChange(entityId,columnId,entity), optional renderColumn/loading/empty
+  content/accessibility labels. Entity/column IDs must be globally unique/stable.
+- `/kanban-column`: id/title/entities/getEntityId/renderCard, optional color class
+  and empty content. `/entity-card`: id/entity/title, optional avatar/subtitle/
+  badges/time/cardClassName/isDragging/onActivate.
+
+## Explicit migration namespaces (never mix with flat APIs below)
+
+### @lindaui/blocks/compat
+
+Re-exports `@lindaui/ui/compat` controls/utilities with their legacy props.
+Adds `KPICard` (title/value/icon/color/trend/isLoading), `StatusFilters`
+(availableStatuses/selectedStatuses/onStatusToggle/counts/labels/colors) and
+`DateDivider`. The existing `/stat-card` and flat component APIs are untouched.
+
+### @lindaui/blocks/chat
+
+Exports ChatAvatar, ChatHeader, ChatLayout, ConversationList, ConversationListItem,
+ConversationThread, EmptyChatView, MessageBubble, MessageComposer and their types.
+Messages: id/text/timestamp, side `left|right|center`, optional authorTag and media
+`{kind:"image"|"audio"|"pdf",url,label?}`. ConversationSummary: id/title, optional
+timestamp/preview/subtitle/badge/isSelected/avatarUrl/unreadCount.
+
+ConversationList uses `items`, `searchValue`/`onSearchChange`, `onItemSelect`, labels,
+optional filters/isLoading/emptyMessage/renderAvatar/renderItems. Search filtering
+stays in the consumer. MessageComposer uses value/onValueChange/onSend, isSending,
+`disabled` and placeholder; Enter sends, Shift+Enter inserts a newline.
+Do NOT import these types from `/chat-types`: that unchanged flat entry has
+incoming/outgoing sides and sentAt instead.
+
+### @lindaui/blocks/analytics
+
+Exports AiCostCard, AiPerformanceCard, AnalyticsCard, AnalyticsSkeleton,
+FetchingIndicator, EntityHealthCard, StatusDistributionChart, TimeRangePicker,
+TopEntitiesTable and corresponding generic presentation types.
+StatusDatum: key/label/count/color. HealthEntity: id/name/score and status
+`healthy|at_risk|critical`; labels and link renderers are injected.
+TimeRangePicker uses preset `24h|7d|30d|custom`, customRange
+`RangeValue<DateValue> | null`, onPresetChange/onCustomRangeChange and translation
+function `t`. This is NOT the unchanged flat `/time-range-picker` documented below.
+SDK mapping, tenant policy, fetching and navigation stay in the consumer.
+
+Dayjs, @internationalized/date, @react-types/shared, motion and drag/drop are
+runtime dependencies (including public date types), not workspace-only tooling.
+Compatibility stories are embedded under src/compat-chat and src/analytics and
+registered in Storybook; they are excluded from exports, declarations and tarballs.
+For original LeadConverter styling use the separate token source
+`@lindaui/tokens/lead-converter.css` after Tailwind; do not also import teal `/css`.
+
 ---
 
 ## Auth & forms
@@ -98,7 +181,7 @@ on a fixed dark `viewer-*` surface (for use over media); `inline` drops the abso
 positioning + forced dark bg, fills its container and inherits the panel surface with
 token-driven (legible) text. Content is identical across variants.
 
-## Chat (generic — data-agnostic, WhatsApp-style presentation)
+## Existing flat chat (unchanged — distinct from /chat)
 
 Types live in `@lindaui/blocks/chat-types` (no runtime exports, just shapes):
 `GenericMessage` (`id`, `side: "incoming"|"outgoing"`, `text?`, `media?:
@@ -193,3 +276,14 @@ const config = { sales: { label: "Sales", color: "var(--chart-1)" } };
   {start,end}` (ISO date strings), `onRangeChange`.
 - `@lindaui/blocks/fetching-indicator` — small "Actualizando…" pill with a spinner,
   for overlaying on already-loaded content (distinct from a full loading state).
+
+## Agent integration skill
+
+For UI implementation, use the portable `lindaui` Agent Skill from
+https://github.com/francocarballar/lindaui/tree/main/skills/lindaui .
+Install with `npx skills add francocarballar/lindaui --skill lindaui`.
+Its Node CLI supports Windows, macOS and Linux and reads the consumer-installed
+API: doctor, api, setup, theme, scaffold, activate and check. Mutation commands
+produce plans by default. Use activate when adopting LindaUI for all UI tasks.
+Always prefer this installed package's exports, types and llms.txt over newer
+unpublished GitHub APIs. See the skill for setup, recipes and verification.