@gugacoder/agentic-chat 0.2.0

package/dist/display/ChartRenderer.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AreaChart, Area, BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, CartesianGrid, Tooltip, ResponsiveContainer, XAxis, YAxis, } from "recharts";
+import { Card } from "../ui/card";
+const CHART_COLORS = [
+    "var(--chart-1)",
+    "var(--chart-2)",
+    "var(--chart-3)",
+    "var(--chart-4)",
+    "var(--chart-5)",
+];
+const AXIS_PROPS = {
+    stroke: "var(--border)",
+    tick: { fill: "var(--muted-foreground)", fontSize: 12 },
+};
+const TOOLTIP_STYLE = {
+    contentStyle: {
+        background: "var(--card)",
+        border: "1px solid var(--border)",
+        color: "var(--card-foreground)",
+        borderRadius: "0.375rem",
+        fontSize: "0.75rem",
+    },
+};
+function formatValue(value, format) {
+    if (!format)
+        return String(value);
+    const locale = format.locale ?? "pt-BR";
+    const prefix = format.prefix ?? "";
+    const suffix = format.suffix ?? "";
+    if (prefix.includes("R$") || prefix.includes("$") || prefix.includes("€")) {
+        const currencyMap = {
+            "R$": "BRL",
+            "$": "USD",
+            "€": "EUR",
+        };
+        const currency = Object.keys(currencyMap).find(k => prefix.includes(k));
+        if (currency) {
+            return new Intl.NumberFormat(locale, { style: "currency", currency: currencyMap[currency] }).format(value);
+        }
+    }
+    if (suffix.includes("%")) {
+        return new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 }).format(value / 100);
+    }
+    const formatted = new Intl.NumberFormat(locale).format(value);
+    return `${prefix}${formatted}${suffix}`;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function makeTooltipFormatter(format) {
+    return (value) => [
+        typeof value === "number" ? formatValue(value, format) : String(value ?? ""),
+        "",
+    ];
+}
+export function ChartRenderer({ type, title, data, format }) {
+    const chartData = data.map((d) => ({ name: d.label, value: d.value, color: d.color }));
+    const tooltipFormatter = makeTooltipFormatter(format);
+    const sharedProps = {
+        data: chartData,
+        margin: { top: 4, right: 8, left: 8, bottom: 4 },
+    };
+    return (_jsxs(Card, { className: "p-4", children: [title && _jsx("p", { className: "text-sm font-medium text-foreground mb-4", children: title }), _jsx("div", { className: "min-h-[200px]", children: _jsx(ResponsiveContainer, { width: "100%", height: 200, children: renderChart(type, chartData, sharedProps, tooltipFormatter) }) })] }));
+}
+function renderChart(type, data, sharedProps, tooltipFormatter) {
+    switch (type) {
+        case "bar":
+            return (_jsxs(BarChart, { ...sharedProps, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--border)" }), _jsx(XAxis, { dataKey: "name", ...AXIS_PROPS }), _jsx(YAxis, { width: 48, ...AXIS_PROPS }), _jsx(Tooltip, { formatter: tooltipFormatter, ...TOOLTIP_STYLE }), _jsx(Bar, { dataKey: "value", radius: [4, 4, 0, 0], children: data.map((entry, index) => (_jsx(Cell, { fill: entry.color ?? CHART_COLORS[index % CHART_COLORS.length] }, index))) })] }));
+        case "line":
+            return (_jsxs(LineChart, { ...sharedProps, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--border)" }), _jsx(XAxis, { dataKey: "name", ...AXIS_PROPS }), _jsx(YAxis, { width: 48, ...AXIS_PROPS }), _jsx(Tooltip, { formatter: tooltipFormatter, ...TOOLTIP_STYLE }), _jsx(Line, { type: "monotone", dataKey: "value", stroke: CHART_COLORS[0], strokeWidth: 2, dot: { r: 4, fill: CHART_COLORS[0] } })] }));
+        case "area":
+            return (_jsxs(AreaChart, { ...sharedProps, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--border)" }), _jsx(XAxis, { dataKey: "name", ...AXIS_PROPS }), _jsx(YAxis, { width: 48, ...AXIS_PROPS }), _jsx(Tooltip, { formatter: tooltipFormatter, ...TOOLTIP_STYLE }), _jsx(Area, { type: "monotone", dataKey: "value", stroke: CHART_COLORS[0], fill: CHART_COLORS[0], fillOpacity: 0.2, strokeWidth: 2 })] }));
+        case "pie":
+            return (_jsxs(PieChart, { children: [_jsx(Tooltip, { formatter: tooltipFormatter, ...TOOLTIP_STYLE }), _jsx(Pie, { data: data, dataKey: "value", nameKey: "name", cx: "50%", cy: "50%", outerRadius: "70%", label: ({ name }) => name, labelLine: { stroke: "var(--muted-foreground)" }, children: data.map((entry, index) => (_jsx(Cell, { fill: entry.color ?? CHART_COLORS[index % CHART_COLORS.length] }, index))) })] }));
+        case "donut":
+            return (_jsxs(PieChart, { children: [_jsx(Tooltip, { formatter: tooltipFormatter, ...TOOLTIP_STYLE }), _jsx(Pie, { data: data, dataKey: "value", nameKey: "name", cx: "50%", cy: "50%", innerRadius: "40%", outerRadius: "70%", label: ({ name }) => name, labelLine: { stroke: "var(--muted-foreground)" }, children: data.map((entry, index) => (_jsx(Cell, { fill: entry.color ?? CHART_COLORS[index % CHART_COLORS.length] }, index))) })] }));
+    }
+}

package/dist/display/ChoiceButtonsRenderer.d.ts

@@ -0,0 +1,6 @@
+import type { DisplayChoices } from "@gugacoder/agentic-sdk";
+type ChoiceButtonsProps = DisplayChoices & {
+    onChoiceSelect?: (value: string) => void;
+};
+export declare function ChoiceButtonsRenderer({ question, choices, layout, onChoiceSelect, }: ChoiceButtonsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/display/ChoiceButtonsRenderer.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../ui/button.js";
+import { Card } from "../ui/card.js";
+import { cn } from "../lib/utils.js";
+export function ChoiceButtonsRenderer({ question, choices, layout, onChoiceSelect, }) {
+    const [selected, setSelected] = useState(null);
+    function handleSelect(id) {
+        setSelected(id);
+        onChoiceSelect?.(id);
+    }
+    return (_jsxs("div", { className: "space-y-3 w-fit", children: [question && _jsx("p", { className: "text-sm font-medium text-foreground", children: question }), _jsx("div", { className: cn(layout === "buttons" && "flex flex-wrap gap-2", layout === "cards" && "grid grid-cols-1 sm:grid-cols-2 gap-2", layout === "list" && "flex flex-col gap-1"), role: "group", "aria-label": question ?? "Escolha uma opção", children: choices.map((choice) => {
+                    const isSelected = selected === choice.id;
+                    if (layout === "buttons") {
+                        return (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => handleSelect(choice.id), "aria-pressed": isSelected, className: cn(isSelected && "ring-2 ring-ring"), children: [choice.icon && (_jsx("span", { "aria-hidden": "true", children: choice.icon })), choice.label] }, choice.id));
+                    }
+                    if (layout === "cards") {
+                        return (_jsxs(Card, { className: cn("p-3 cursor-pointer hover:bg-muted/50 transition-colors", isSelected && "ring-2 ring-ring"), onClick: () => handleSelect(choice.id), role: "button", "aria-pressed": isSelected, children: [choice.icon && (_jsx("span", { className: "text-base", "aria-hidden": "true", children: choice.icon })), _jsx("span", { className: "block font-medium text-sm text-foreground", children: choice.label }), choice.description && (_jsx("span", { className: "block text-xs text-muted-foreground mt-1", children: choice.description }))] }, choice.id));
+                    }
+                    // list
+                    return (_jsxs("button", { className: cn("flex items-center gap-3 w-full rounded-md px-3 py-2 text-sm text-left hover:bg-muted transition-colors", isSelected && "bg-muted ring-1 ring-ring"), onClick: () => handleSelect(choice.id), "aria-pressed": isSelected, children: [_jsx("span", { className: cn("w-4 h-4 rounded-full border-2 border-input flex-shrink-0", isSelected && "border-primary bg-primary"), "aria-hidden": "true" }), _jsxs("span", { className: "flex items-center gap-2 flex-1 min-w-0", children: [choice.icon && (_jsx("span", { "aria-hidden": "true", children: choice.icon })), _jsx("span", { className: "font-medium text-foreground", children: choice.label }), choice.description && (_jsx("span", { className: "text-xs text-muted-foreground ml-auto", children: choice.description }))] })] }, choice.id));
+                }) })] }));
+}

package/dist/display/CodeBlockRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayCode } from "@gugacoder/agentic-sdk";
+export declare function CodeBlockRenderer({ language, code, title, lineNumbers }: DisplayCode): import("react/jsx-runtime").JSX.Element;

package/dist/display/CodeBlockRenderer.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../ui/button.js";
+import { cn } from "../lib/utils.js";
+export function CodeBlockRenderer({ language, code, title, lineNumbers }) {
+    const [copied, setCopied] = useState(false);
+    async function handleCopy() {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }
+    const displayLines = lineNumbers
+        ? code.split("\n").map((line, i) => (_jsxs("span", { className: "flex gap-4", children: [_jsx("span", { className: "select-none text-muted-foreground w-6 text-right shrink-0", children: i + 1 }), _jsx("span", { children: line })] }, i)))
+        : code;
+    return (_jsxs("div", { className: cn("rounded-md border border-border bg-muted/30 overflow-hidden"), children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border", children: [_jsx("span", { className: "text-xs text-muted-foreground font-mono", children: title ?? language }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: handleCopy, "aria-label": copied ? "Copiado!" : "Copiar código", className: "h-7 gap-1.5", children: [copied ? _jsx(Check, { className: "h-3 w-3" }) : _jsx(Copy, { className: "h-3 w-3" }), _jsx("span", { className: "text-xs", children: copied ? "Copiado!" : "Copiar" })] })] }), _jsx("pre", { className: "p-4 overflow-x-auto font-mono text-sm", children: lineNumbers ? (_jsx("code", { children: displayLines })) : (_jsx("code", { children: code })) })] }));
+}

package/dist/display/ComparisonTableRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayComparison } from "@gugacoder/agentic-sdk";
+export declare function ComparisonTableRenderer({ title, items, attributes }: DisplayComparison): import("react/jsx-runtime").JSX.Element;

package/dist/display/ComparisonTableRenderer.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { CheckCircle } from "lucide-react";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../ui/table.js";
+import { cn } from "../lib/utils.js";
+function formatMoney(value, currency = "BRL") {
+    return new Intl.NumberFormat("pt-BR", { style: "currency", currency }).format(value);
+}
+export function ComparisonTableRenderer({ title, items, attributes }) {
+    const [bestIdx, setBestIdx] = useState(null);
+    // Auto-detect best value by lowest price if no manual selection
+    const lowestPriceIdx = items.reduce((acc, item, i) => {
+        if (!item.price)
+            return acc;
+        if (acc === null)
+            return i;
+        const best = items[acc]?.price;
+        return best && item.price.value < best.value ? i : acc;
+    }, null);
+    const highlightIdx = bestIdx ?? lowestPriceIdx;
+    return (_jsxs("div", { className: "space-y-2", children: [title && _jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }), _jsxs(ScrollArea, { className: "w-full", children: [_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "font-semibold text-center", children: "Atributo" }), items.map((item, i) => (_jsx(TableHead, { className: cn("font-semibold text-center", i === highlightIdx && "bg-muted"), children: _jsxs("button", { className: "flex flex-col items-center gap-0.5 w-full cursor-pointer hover:opacity-80", onClick: () => setBestIdx(i === bestIdx ? null : i), title: "Marcar como melhor", children: [i === highlightIdx && (_jsx(CheckCircle, { className: "h-3.5 w-3.5 text-primary" })), _jsx("span", { className: "font-semibold", children: item.title }), item.price && (_jsx("span", { className: "text-xs text-muted-foreground font-normal", children: formatMoney(item.price.value, item.price.currency) }))] }) }, i)))] }) }), _jsx(TableBody, { children: attributes && attributes.length > 0 ? (attributes.map((attr, ri) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: attr.label }), items.map((item, ci) => {
+                                            const val = item[attr.key];
+                                            return (_jsx(TableCell, { className: cn("text-center", ci === highlightIdx && "bg-muted/50"), children: val === true ? "✓" : val === false ? "✗" : val != null ? String(val) : "—" }, ci));
+                                        })] }, ri)))) : (_jsxs(_Fragment, { children: [items.some((i) => i.rating) && (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "Avalia\u00E7\u00E3o" }), items.map((item, ci) => (_jsx(TableCell, { className: cn("text-center", ci === highlightIdx && "bg-muted/50"), children: item.rating ? `${item.rating.score}/5 (${item.rating.count})` : "—" }, ci)))] })), items.some((i) => i.description) && (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "Descri\u00E7\u00E3o" }), items.map((item, ci) => (_jsx(TableCell, { className: cn("text-center", ci === highlightIdx && "bg-muted/50"), children: item.description ?? "—" }, ci)))] }))] })) })] }), _jsx(ScrollBar, { orientation: "horizontal" })] })] }));
+}

package/dist/display/DataTableRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayTable } from "@gugacoder/agentic-sdk";
+export declare function DataTableRenderer({ title, columns, rows, sortable }: DisplayTable): import("react/jsx-runtime").JSX.Element;

package/dist/display/DataTableRenderer.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "../ui/table.js";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area.js";
+import { Button } from "../ui/button.js";
+import { Badge } from "../ui/badge.js";
+function formatMoney(value, currency = "BRL") {
+    return new Intl.NumberFormat("pt-BR", { style: "currency", currency }).format(value);
+}
+function renderCellValue(value, type) {
+    if (value == null)
+        return "—";
+    switch (type) {
+        case "money":
+            return typeof value === "number"
+                ? formatMoney(value)
+                : typeof value === "object" && value !== null && "value" in value
+                    ? formatMoney(value.value, value.currency)
+                    : String(value);
+        case "image":
+            return typeof value === "string" ? (_jsx("img", { src: value, alt: "", className: "rounded-sm max-h-12 object-cover", loading: "lazy", decoding: "async" })) : null;
+        case "link":
+            return typeof value === "string" ? (_jsx("a", { href: value, target: "_blank", rel: "noopener noreferrer", className: "text-primary underline underline-offset-2 hover:opacity-80", children: value })) : null;
+        case "badge":
+            return _jsx(Badge, { variant: "secondary", children: String(value) });
+        default:
+            return String(value);
+    }
+}
+function compareValues(a, b, type) {
+    if (a == null && b == null)
+        return 0;
+    if (a == null)
+        return 1;
+    if (b == null)
+        return -1;
+    if (type === "money") {
+        const av = typeof a === "number" ? a : typeof a === "object" && a !== null && "value" in a ? a.value : 0;
+        const bv = typeof b === "number" ? b : typeof b === "object" && b !== null && "value" in b ? b.value : 0;
+        return av - bv;
+    }
+    if (type === "number") {
+        return (Number(a) || 0) - (Number(b) || 0);
+    }
+    return String(a).localeCompare(String(b), "pt-BR");
+}
+export function DataTableRenderer({ title, columns, rows, sortable }) {
+    const [sortKey, setSortKey] = useState(null);
+    const [sortDir, setSortDir] = useState("asc");
+    function handleSort(key) {
+        if (!sortable)
+            return;
+        if (sortKey === key) {
+            setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+        }
+        else {
+            setSortKey(key);
+            setSortDir("asc");
+        }
+    }
+    const sortedRows = sortKey
+        ? [...rows].sort((a, b) => {
+            const col = columns.find((c) => c.key === sortKey);
+            const dir = sortDir === "asc" ? 1 : -1;
+            return compareValues(a[sortKey], b[sortKey], col?.type ?? "text") * dir;
+        })
+        : rows;
+    return (_jsxs("div", { className: "space-y-2", children: [title && _jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }), _jsxs(ScrollArea, { className: "w-full", children: [_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((col) => (_jsx(TableHead, { className: col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left", children: sortable ? (_jsxs(Button, { variant: "ghost", size: "sm", className: "-ml-3 h-8 font-semibold", onClick: () => handleSort(col.key), "aria-sort": sortKey === col.key
+                                                ? sortDir === "asc"
+                                                    ? "ascending"
+                                                    : "descending"
+                                                : undefined, children: [col.label, sortKey === col.key ? (sortDir === "asc" ? (_jsx(ArrowUp, { className: "ml-1 h-3 w-3" })) : (_jsx(ArrowDown, { className: "ml-1 h-3 w-3" }))) : (_jsx(ArrowUpDown, { className: "ml-1 h-3 w-3" }))] })) : (col.label) }, col.key))) }) }), _jsx(TableBody, { children: sortedRows.map((row, ri) => (_jsx(TableRow, { children: columns.map((col) => (_jsx(TableCell, { className: col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left", children: renderCellValue(row[col.key], col.type) }, col.key))) }, ri))) })] }), _jsx(ScrollBar, { orientation: "horizontal" })] })] }));
+}

package/dist/display/FileCardRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayFile } from "@gugacoder/agentic-sdk";
+export declare function FileCardRenderer({ name, type, size, url }: DisplayFile): import("react/jsx-runtime").JSX.Element;

package/dist/display/FileCardRenderer.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Download, File, FileCode, FileImage, FileMinus, FileText, FileVideo, Music, } from "lucide-react";
+import { Button } from "../ui/button.js";
+import { Card } from "../ui/card.js";
+function getFileIcon(type) {
+    const mime = type.toLowerCase();
+    if (mime.startsWith("image/"))
+        return FileImage;
+    if (mime.startsWith("video/"))
+        return FileVideo;
+    if (mime.startsWith("audio/"))
+        return Music;
+    if (mime === "application/pdf" || mime === "text/plain" || mime.includes("document"))
+        return FileText;
+    if (mime.includes("spreadsheet") || mime.includes("csv"))
+        return FileMinus;
+    if (mime.includes("javascript") || mime.includes("typescript") || mime.includes("json") || mime.includes("html") || mime.includes("css") || mime.includes("xml"))
+        return FileCode;
+    return File;
+}
+function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+export function FileCardRenderer({ name, type, size, url }) {
+    const Icon = getFileIcon(type);
+    return (_jsxs(Card, { className: "flex items-center gap-3 p-3", children: [_jsx("div", { className: "shrink-0 text-primary", children: _jsx(Icon, { className: "h-8 w-8" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "font-medium text-sm truncate", children: name }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [type, size !== undefined && ` · ${formatSize(size)}`] })] }), url && (_jsx(Button, { variant: "ghost", size: "icon", asChild: true, children: _jsx("a", { href: url, download: name, "aria-label": `Baixar ${name}`, children: _jsx(Download, { className: "h-4 w-4" }) }) }))] }));
+}

package/dist/display/GalleryRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayGallery } from "@gugacoder/agentic-sdk";
+export declare function GalleryRenderer({ title, images }: DisplayGallery): import("react/jsx-runtime").JSX.Element;

package/dist/display/GalleryRenderer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ZoomIn } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Dialog, DialogContent, DialogTitle } from "../ui/dialog.js";
+export function GalleryRenderer({ title, images }) {
+    const [lightboxIdx, setLightboxIdx] = useState(null);
+    const activeImage = lightboxIdx !== null ? images[lightboxIdx] : null;
+    return (_jsxs("div", { className: "space-y-2", children: [title && _jsx("h3", { className: "text-sm font-medium text-foreground", children: title }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-2", children: images.map((img, i) => (_jsxs("button", { className: "relative group cursor-pointer rounded-md overflow-hidden", onClick: () => setLightboxIdx(i), "aria-label": img.alt ?? `Imagem ${i + 1}`, children: [_jsx("img", { src: img.url, alt: img.alt ?? "", className: "w-full h-full object-cover aspect-square", loading: "lazy" }), _jsx("div", { className: "absolute inset-0 bg-background/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity", children: _jsx(ZoomIn, { className: "h-5 w-5 text-foreground" }) }), img.caption && (_jsx("p", { className: "absolute bottom-0 left-0 right-0 text-sm text-muted-foreground bg-background/80 px-2 py-1 truncate", children: img.caption }))] }, i))) }), _jsx(Dialog, { open: lightboxIdx !== null, onOpenChange: (open) => { if (!open)
+                    setLightboxIdx(null); }, children: _jsxs(DialogContent, { className: cn("max-w-4xl p-0 bg-background/95"), children: [_jsx(DialogTitle, { className: "sr-only", children: activeImage?.alt ?? "Visualizador de imagem" }), activeImage && (_jsxs("div", { className: "flex flex-col", children: [_jsx("img", { src: activeImage.url, alt: activeImage.alt ?? "", className: "w-full max-h-[80vh] object-contain" }), activeImage.caption && (_jsx("p", { className: "text-sm text-muted-foreground px-4 py-3", children: activeImage.caption }))] }))] }) })] }));
+}

package/dist/display/ImageViewerRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayImage } from "@gugacoder/agentic-sdk";
+export declare function ImageViewerRenderer({ url, alt, caption, width, height }: DisplayImage): import("react/jsx-runtime").JSX.Element;

package/dist/display/ImageViewerRenderer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ZoomIn, ZoomOut, RotateCcw, X } from "lucide-react";
+import { Dialog, DialogContent, DialogTitle } from "../ui/dialog.js";
+import { Button } from "../ui/button.js";
+import { cn } from "../lib/utils.js";
+export function ImageViewerRenderer({ url, alt, caption, width, height }) {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [zoom, setZoom] = useState(1);
+    function handleOpen() {
+        setZoom(1);
+        setDialogOpen(true);
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("button", { className: "relative group cursor-pointer rounded-md overflow-hidden inline-block", onClick: handleOpen, "aria-label": `Ampliar imagem${alt ? `: ${alt}` : ""}`, children: [_jsx("img", { src: url, alt: alt ?? "", className: "block max-w-full rounded-md", loading: "lazy", decoding: "async", width: width, height: height }), _jsx("div", { className: "absolute inset-0 bg-background/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity", children: _jsx(ZoomIn, { className: "h-5 w-5 text-foreground" }) })] }), caption && (_jsx("p", { className: "text-xs text-muted-foreground", children: caption })), _jsx(Dialog, { open: dialogOpen, onOpenChange: setDialogOpen, children: _jsxs(DialogContent, { className: "max-w-4xl p-0 bg-background/95 overflow-hidden", children: [_jsx(DialogTitle, { className: "sr-only", children: alt ?? "Visualizador de imagem" }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-1 p-2 border-b border-border", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)), "aria-label": "Reduzir zoom", disabled: zoom <= 0.25, children: _jsx(ZoomOut, { className: "h-4 w-4" }) }), _jsxs("span", { className: cn("text-xs text-muted-foreground w-12 text-center tabular-nums"), children: [Math.round(zoom * 100), "%"] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setZoom((z) => Math.min(4, z + 0.25)), "aria-label": "Aumentar zoom", disabled: zoom >= 4, children: _jsx(ZoomIn, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setZoom(1), "aria-label": "Resetar zoom", children: _jsx(RotateCcw, { className: "h-4 w-4" }) }), _jsx("div", { className: "flex-1" }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setDialogOpen(false), "aria-label": "Fechar", children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "overflow-auto max-h-[80vh] flex items-center justify-center p-4", children: _jsx("img", { src: url, alt: alt ?? "", style: { transform: `scale(${zoom})`, transformOrigin: "center" }, className: "max-w-full transition-transform", width: width, height: height }) }), caption && (_jsx("p", { className: "text-xs text-muted-foreground text-center p-2 border-t border-border", children: caption }))] })] }) })] }));
+}

package/dist/display/LinkPreviewRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayLink } from "@gugacoder/agentic-sdk";
+export declare function LinkPreviewRenderer({ url, title, description, image, favicon, domain, }: DisplayLink): import("react/jsx-runtime").JSX.Element;

package/dist/display/LinkPreviewRenderer.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Globe } from "lucide-react";
+import { Card } from "../ui/card";
+function getDomain(url, domainProp) {
+    if (domainProp)
+        return domainProp;
+    try {
+        return new URL(url).hostname.replace(/^www\./, "");
+    }
+    catch {
+        return url;
+    }
+}
+export function LinkPreviewRenderer({ url, title, description, image, favicon, domain, }) {
+    const [imgError, setImgError] = useState(false);
+    const [faviconError, setFaviconError] = useState(false);
+    const displayDomain = getDomain(url, domain);
+    return (_jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", "aria-label": `Link: ${title}`, children: _jsxs(Card, { className: "overflow-hidden hover:bg-muted/50 transition-colors", children: [image && !imgError && (_jsx("div", { className: "aspect-video overflow-hidden", children: _jsx("img", { src: image, alt: title, className: "w-full h-full object-cover", loading: "lazy", decoding: "async", onError: () => setImgError(true) }) })), _jsxs("div", { className: "p-3 space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [favicon && !faviconError ? (_jsx("img", { src: favicon, alt: "", className: "w-3 h-3 rounded-sm", onError: () => setFaviconError(true), "aria-hidden": "true" })) : (_jsx(Globe, { size: 12, "aria-hidden": "true", className: "shrink-0" })), _jsx("span", { children: displayDomain })] }), _jsx("p", { className: "font-medium text-foreground text-sm", children: title }), description && (_jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: description }))] })] }) }));
+}

package/dist/display/MapViewRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayMap } from "@gugacoder/agentic-sdk";
+export declare function MapViewRenderer({ title, pins, zoom }: DisplayMap): import("react/jsx-runtime").JSX.Element;

package/dist/display/MapViewRenderer.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MapPin } from "lucide-react";
+import { Card } from "../ui/card.js";
+import { Separator } from "../ui/separator.js";
+function buildOsmUrl(pins, zoom) {
+    if (pins.length === 0) {
+        return `https://www.openstreetmap.org/export/embed.html?bbox=-180,-90,180,90&layer=mapnik`;
+    }
+    const lat = pins.reduce((acc, p) => acc + p.lat, 0) / pins.length;
+    const lng = pins.reduce((acc, p) => acc + p.lng, 0) / pins.length;
+    const firstPin = pins[0];
+    const markerParam = pins.length === 1
+        ? `&mlat=${firstPin.lat}&mlon=${firstPin.lng}`
+        : "";
+    return `https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.05},${lat - 0.05},${lng + 0.05},${lat + 0.05}&layer=mapnik&zoom=${zoom}${markerParam}`;
+}
+export function MapViewRenderer({ title, pins, zoom }) {
+    const osmUrl = buildOsmUrl(pins, zoom);
+    return (_jsxs(Card, { className: "overflow-hidden", children: [title && (_jsx("div", { className: "px-4 py-3", children: _jsx("h3", { className: "font-medium text-sm text-foreground", children: title }) })), _jsxs("div", { className: "relative aspect-video bg-muted text-muted-foreground overflow-hidden", children: [_jsx("iframe", { src: osmUrl, className: "w-full h-full border-0", title: title ?? "Mapa OpenStreetMap", loading: "lazy", referrerPolicy: "no-referrer", sandbox: "allow-scripts allow-same-origin" }), _jsx("div", { className: "absolute inset-0 pointer-events-none flex items-center justify-center opacity-10", children: _jsx(MapPin, { className: "h-10 w-10" }) })] }), pins.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("ul", { className: "p-3 space-y-2", "aria-label": "Locais no mapa", children: pins.map((pin, i) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx(MapPin, { className: "h-4 w-4 shrink-0 text-primary mt-0.5", "aria-hidden": "true" }), _jsxs("span", { className: "flex flex-col min-w-0", children: [pin.label && (_jsx("span", { className: "font-medium text-sm text-foreground", children: pin.label })), pin.address && (_jsx("span", { className: "text-xs text-muted-foreground", children: pin.address })), !pin.label && !pin.address && (_jsxs("span", { className: "text-xs text-muted-foreground font-mono", children: [pin.lat.toFixed(4), ", ", pin.lng.toFixed(4)] }))] })] }, i))) })] }))] }));
+}

package/dist/display/MetricCardRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayMetric } from "@gugacoder/agentic-sdk";
+export declare function MetricCardRenderer({ label, value, unit, trend }: DisplayMetric): import("react/jsx-runtime").JSX.Element;

package/dist/display/MetricCardRenderer.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowRight, ArrowUp } from "lucide-react";
+import { Card } from "../ui/card.js";
+const TREND_CONFIG = {
+    up: { Icon: ArrowUp, colorClass: "text-primary" },
+    down: { Icon: ArrowDown, colorClass: "text-destructive" },
+    neutral: { Icon: ArrowRight, colorClass: "text-muted-foreground" },
+};
+export function MetricCardRenderer({ label, value, unit, trend }) {
+    const trendConfig = trend ? TREND_CONFIG[trend.direction] : null;
+    return (_jsxs(Card, { className: "p-4 w-fit", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: label }), _jsxs("div", { className: "flex items-baseline gap-2 mt-1", children: [_jsx("span", { className: "text-2xl font-bold text-foreground", children: value }), unit && _jsx("span", { className: "text-sm text-muted-foreground", children: unit })] }), trend && trendConfig && (_jsxs("div", { className: `flex items-center gap-1 mt-1 text-sm ${trendConfig.colorClass}`, children: [_jsx(trendConfig.Icon, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: trend.value })] }))] }));
+}

package/dist/display/PriceHighlightRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayPrice } from "@gugacoder/agentic-sdk";
+export declare function PriceHighlightRenderer({ value, label, context, source, badge }: DisplayPrice): import("react/jsx-runtime").JSX.Element;

package/dist/display/PriceHighlightRenderer.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import { Badge } from "../ui/badge";
+import { Card } from "../ui/card";
+function formatPrice(value, currency) {
+    return new Intl.NumberFormat("pt-BR", {
+        style: "currency",
+        currency,
+    }).format(value);
+}
+export function PriceHighlightRenderer({ value, label, context, source, badge }) {
+    return (_jsxs(Card, { className: "p-4 space-y-1 w-fit", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: label }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-2xl font-bold text-foreground", children: formatPrice(value.value, value.currency) }), badge && (_jsx(Badge, { variant: "destructive", children: badge.label }))] }), context && _jsx("p", { className: "text-sm text-muted-foreground", children: context }), source && (_jsxs("a", { href: source.url, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-1.5 text-xs text-primary hover:underline", children: [source.favicon && (_jsx("img", { src: source.favicon, alt: "", width: 14, height: 14, "aria-hidden": "true" })), _jsx("span", { children: source.name }), _jsx(ExternalLink, { size: 12, "aria-hidden": "true" })] }))] }));
+}

package/dist/display/ProductCardRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayProduct } from "@gugacoder/agentic-sdk";
+export declare function ProductCardRenderer({ title, image, price, originalPrice, rating, badges, url, description, }: DisplayProduct): import("react/jsx-runtime").JSX.Element;

package/dist/display/ProductCardRenderer.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Star } from "lucide-react";
+import { Card, CardContent, CardTitle } from "../ui/card.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { cn } from "../lib/utils.js";
+function StarRating({ score, count }) {
+    const fullStars = Math.floor(score);
+    const hasHalf = score - fullStars >= 0.5;
+    const emptyStars = 5 - fullStars - (hasHalf ? 1 : 0);
+    return (_jsxs("div", { className: "flex items-center gap-0.5 text-primary", "aria-label": `${score} de 5 estrelas (${count} avaliações)`, children: [Array.from({ length: fullStars }).map((_, i) => (_jsx(Star, { size: 14, fill: "currentColor" }, `f${i}`))), hasHalf && _jsx(Star, { size: 14, fill: "none" }), Array.from({ length: emptyStars }).map((_, i) => (_jsx(Star, { size: 14, fill: "none", className: "text-muted-foreground" }, `e${i}`))), _jsxs("span", { className: "text-xs text-muted-foreground ml-1", children: ["(", count, ")"] })] }));
+}
+function formatMoney(value, currency = "BRL") {
+    return new Intl.NumberFormat("pt-BR", { style: "currency", currency }).format(value);
+}
+export function ProductCardRenderer({ title, image, price, originalPrice, rating, badges, url, description, }) {
+    const [imgError, setImgError] = useState(false);
+    const discount = price && originalPrice && originalPrice.value > price.value
+        ? Math.round(((originalPrice.value - price.value) / originalPrice.value) * 100)
+        : null;
+    return (_jsxs(Card, { className: "overflow-hidden w-fit max-w-sm", children: [image && !imgError && (_jsxs("div", { className: "relative", children: [_jsx("img", { src: image, alt: title, className: cn("w-full aspect-video object-cover"), loading: "lazy", decoding: "async", onError: () => setImgError(true) }), discount !== null && (_jsxs(Badge, { variant: "destructive", className: "absolute top-2 right-2", children: ["-", discount, "%"] }))] })), _jsxs(CardContent, { className: "p-4 space-y-2", children: [badges && badges.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: badges.map((b, i) => (_jsx(Badge, { variant: "secondary", children: b.label }, i))) })), _jsx(CardTitle, { className: "text-sm", children: title }), description && (_jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: description })), rating && _jsx(StarRating, { score: rating.score, count: rating.count }), price && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-lg font-bold", children: formatMoney(price.value, price.currency) }), originalPrice && (_jsx("span", { className: "text-sm text-muted-foreground line-through", children: formatMoney(originalPrice.value, originalPrice.currency) }))] })), url && (_jsx(Button, { className: "w-full", size: "sm", asChild: true, children: _jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", children: "Ver produto" }) }))] })] }));
+}

package/dist/display/ProgressStepsRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayProgress } from "@gugacoder/agentic-sdk";
+export declare function ProgressStepsRenderer({ title, steps }: DisplayProgress): import("react/jsx-runtime").JSX.Element;

package/dist/display/ProgressStepsRenderer.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Circle, Clock } from "lucide-react";
+import { Progress } from "../ui/progress.js";
+import { Badge } from "../ui/badge.js";
+import { cn } from "../lib/utils.js";
+export function ProgressStepsRenderer({ title, steps }) {
+    const completed = steps.filter((s) => s.status === "completed").length;
+    const percentage = steps.length > 0 ? Math.round((completed / steps.length) * 100) : 0;
+    return (_jsxs("div", { className: "space-y-3", children: [title && _jsx("p", { className: "font-medium text-foreground", children: title }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Progress, { value: percentage, className: "flex-1" }), _jsxs("span", { className: "text-sm text-muted-foreground tabular-nums", children: [percentage, "%"] })] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [completed, " de ", steps.length, " conclu\u00EDdos"] }), _jsx("ol", { className: "space-y-2", children: steps.map((step, index) => {
+                    const isCompleted = step.status === "completed";
+                    const isPending = step.status === "pending";
+                    return (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { "aria-hidden": "true", className: cn("mt-0.5 shrink-0", isCompleted ? "text-primary" : "text-muted-foreground"), children: isCompleted ? (_jsx(Check, { size: 16 })) : isPending ? (_jsx(Circle, { size: 16 })) : (_jsx(Clock, { size: 16 })) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: cn("text-sm", isCompleted ? "text-foreground" : "text-muted-foreground"), children: step.label }), step.description && (_jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: step.description }))] }), _jsx(Badge, { variant: "secondary", className: "shrink-0 text-xs", children: index + 1 })] }, index));
+                }) })] }));
+}

package/dist/display/SourcesListRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplaySources } from "@gugacoder/agentic-sdk";
+export declare function SourcesListRenderer({ label, sources }: DisplaySources): import("react/jsx-runtime").JSX.Element;

package/dist/display/SourcesListRenderer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink, Globe } from "lucide-react";
+export function SourcesListRenderer({ label, sources }) {
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: label }), _jsx("ol", { className: "space-y-1", children: sources.map((source, index) => (_jsx("li", { children: _jsxs("a", { href: source.url, target: "_blank", rel: "noopener noreferrer", className: "flex items-start gap-2 p-2 rounded-md hover:bg-muted text-sm", children: [_jsx("span", { className: "text-xs text-muted-foreground font-mono w-5 shrink-0 pt-0.5", children: index + 1 }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [source.favicon ? (_jsx("img", { src: source.favicon, alt: "", width: 14, height: 14, className: "shrink-0", "aria-hidden": "true" })) : (_jsx(Globe, { size: 14, className: "shrink-0 text-muted-foreground", "aria-hidden": "true" })), _jsx("span", { className: "font-medium text-primary truncate", children: source.title }), _jsx(ExternalLink, { size: 12, className: "shrink-0 text-muted-foreground", "aria-hidden": "true" })] }), source.snippet && (_jsx("p", { className: "text-xs text-muted-foreground line-clamp-2 mt-0.5", children: source.snippet }))] })] }) }, index))) })] }));
+}

package/dist/display/SpreadsheetRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplaySpreadsheet } from "@gugacoder/agentic-sdk";
+export declare function SpreadsheetRenderer({ title, headers, rows, format }: DisplaySpreadsheet): import("react/jsx-runtime").JSX.Element;

package/dist/display/SpreadsheetRenderer.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../ui/table.js";
+import { cn } from "../lib/utils.js";
+function formatCell(value, colIndex, moneyColumns = [], percentColumns = []) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "number") {
+        if (moneyColumns.includes(colIndex)) {
+            return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(value);
+        }
+        if (percentColumns.includes(colIndex)) {
+            return new Intl.NumberFormat("pt-BR", {
+                style: "percent",
+                minimumFractionDigits: 1,
+                maximumFractionDigits: 2,
+            }).format(value / 100);
+        }
+        return new Intl.NumberFormat("pt-BR").format(value);
+    }
+    return String(value);
+}
+export function SpreadsheetRenderer({ title, headers, rows, format }) {
+    const moneyColumns = format?.moneyColumns ?? [];
+    const percentColumns = format?.percentColumns ?? [];
+    return (_jsxs("div", { className: "space-y-2", children: [title && _jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }), _jsxs(ScrollArea, { className: "w-full", children: [_jsxs(Table, { "aria-readonly": "true", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "text-muted-foreground font-normal text-center w-10", "aria-label": "Linha" }), headers.map((h, i) => (_jsx(TableHead, { className: "font-semibold", children: h }, i)))] }) }), _jsx(TableBody, { children: rows.map((row, ri) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "text-center text-xs text-muted-foreground select-none", children: ri + 1 }), row.map((cell, ci) => {
+                                            const isMoney = moneyColumns.includes(ci);
+                                            const isPercent = percentColumns.includes(ci);
+                                            const isNumber = typeof cell === "number";
+                                            return (_jsx(TableCell, { className: cn((isMoney || isPercent || isNumber) && "text-right font-mono text-sm"), children: formatCell(cell, ci, moneyColumns, percentColumns) }, ci));
+                                        })] }, ri))) })] }), _jsx(ScrollBar, { orientation: "horizontal" })] })] }));
+}

package/dist/display/StepTimelineRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplaySteps } from "@gugacoder/agentic-sdk";
+export declare function StepTimelineRenderer({ title, steps, orientation }: DisplaySteps): import("react/jsx-runtime").JSX.Element;

package/dist/display/StepTimelineRenderer.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import { Badge } from "../ui/badge";
+const STATUS_CIRCLE = {
+    completed: "bg-primary text-primary-foreground",
+    current: "bg-primary/20 border border-primary",
+    pending: "bg-muted text-muted-foreground",
+};
+const STATUS_TITLE = {
+    completed: "text-foreground",
+    current: "text-primary",
+    pending: "text-muted-foreground",
+};
+export function StepTimelineRenderer({ title, steps, orientation }) {
+    const isVertical = orientation !== "horizontal";
+    return (_jsxs("div", { className: cn("flex", isVertical ? "flex-col gap-0" : "flex-row items-start gap-0"), children: [title && (_jsx("p", { className: "text-sm font-medium text-foreground mb-3", children: title })), steps.map((step, index) => {
+                const isLast = index === steps.length - 1;
+                const { status } = step;
+                return (_jsxs("div", { className: cn("flex", isVertical ? "flex-row gap-3" : "flex-col items-center gap-2 flex-1"), children: [_jsxs("div", { className: cn("flex", isVertical ? "flex-col items-center" : "flex-row items-center"), children: [_jsx("div", { className: cn("w-6 h-6 rounded-full flex items-center justify-center shrink-0", STATUS_CIRCLE[status]), children: _jsx(Badge, { variant: "secondary", className: "w-5 h-5 flex items-center justify-center rounded-full p-0 text-[10px] font-semibold border-0 bg-transparent text-inherit", children: index + 1 }) }), !isLast && (_jsx("div", { className: cn(isVertical ? "w-px h-6 bg-border" : "h-px w-full bg-border flex-1") }))] }), _jsxs("div", { className: cn("pb-4 flex-1 min-w-0", isLast && "pb-0", !isVertical && "text-center"), children: [_jsx("p", { className: cn("text-sm font-medium leading-none", STATUS_TITLE[status]), children: step.title }), step.description && (_jsx("p", { className: "text-xs text-muted-foreground mt-1", children: step.description }))] })] }, index));
+            })] }));
+}

package/dist/display/index.d.ts

@@ -0,0 +1,21 @@
+export { AlertRenderer } from "./AlertRenderer.js";
+export { MetricCardRenderer } from "./MetricCardRenderer.js";
+export { PriceHighlightRenderer } from "./PriceHighlightRenderer.js";
+export { FileCardRenderer } from "./FileCardRenderer.js";
+export { CodeBlockRenderer } from "./CodeBlockRenderer.js";
+export { SourcesListRenderer } from "./SourcesListRenderer.js";
+export { StepTimelineRenderer } from "./StepTimelineRenderer.js";
+export { ProgressStepsRenderer } from "./ProgressStepsRenderer.js";
+export { ChartRenderer } from "./ChartRenderer.js";
+export { CarouselRenderer } from "./CarouselRenderer.js";
+export { ProductCardRenderer } from "./ProductCardRenderer.js";
+export { ComparisonTableRenderer } from "./ComparisonTableRenderer.js";
+export { DataTableRenderer } from "./DataTableRenderer.js";
+export { SpreadsheetRenderer } from "./SpreadsheetRenderer.js";
+export { GalleryRenderer } from "./GalleryRenderer.js";
+export { ImageViewerRenderer } from "./ImageViewerRenderer.js";
+export { LinkPreviewRenderer } from "./LinkPreviewRenderer.js";
+export { MapViewRenderer } from "./MapViewRenderer.js";
+export { ChoiceButtonsRenderer } from "./ChoiceButtonsRenderer.js";
+export { defaultDisplayRenderers, resolveDisplayRenderer } from "./registry.js";
+export type { DisplayRendererMap, DisplayActionName } from "./registry.js";