@codrstudio/openclaude-chat 0.1.0

package/dist/display/ChartRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayChart } from "./sdk-types.js";
+export declare function ChartRenderer({ type, title, data, format }: DisplayChart): import("react/jsx-runtime").JSX.Element;

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 "./sdk-types.js";
+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 "./sdk-types.js";
+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 "./sdk-types.js";
+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 "./sdk-types.js";
+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/DisplayReactRenderer.d.ts

@@ -0,0 +1,26 @@
+declare const WHITELIST_MODULES: readonly ["react", "react-dom", "react-dom/client", "framer-motion", "recharts", "lucide-react"];
+type WhitelistedModule = (typeof WHITELIST_MODULES)[number];
+interface ImportDecl {
+    module: WhitelistedModule;
+    symbols: string[];
+}
+interface Layout {
+    height?: number | "auto";
+    aspectRatio?: string;
+    maxWidth?: number;
+}
+export interface DisplayReactRendererProps {
+    version?: "1";
+    title?: string;
+    description?: string;
+    code: string;
+    language?: "jsx" | "tsx";
+    entry?: "default";
+    imports?: ImportDecl[];
+    initialProps?: Record<string, unknown>;
+    layout?: Layout;
+    theme?: "light" | "dark" | "auto";
+    sandboxBase?: string;
+}
+export declare const DisplayReactRenderer: import("react").NamedExoticComponent<DisplayReactRendererProps>;
+export {};

package/dist/display/DisplayReactRenderer.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { transform as sucraseTransform } from "sucrase";
+import { SANDBOX_BOOTSTRAP } from "./react-sandbox/bootstrap.js";
+// ─── Types ────────────────────────────────────────────────────────────────────
+const WHITELIST_MODULES = [
+    "react",
+    "react-dom",
+    "react-dom/client",
+    "framer-motion",
+    "recharts",
+    "lucide-react",
+];
+// ─── Size limits (mirror SDK schema) ──────────────────────────────────────────
+const MAX_CODE_BYTES = 8 * 1024;
+const MAX_PROPS_BYTES = 32 * 1024;
+const bundleCache = new Map();
+function loadBundles(base) {
+    const key = base;
+    const cached = bundleCache.get(key);
+    if (cached)
+        return cached;
+    const p = (async () => {
+        const [react, reactDom, framerMotion, recharts, lucideReact] = await Promise.all([
+            fetch(`${base}/react.js`).then((r) => r.text()),
+            fetch(`${base}/react-dom.js`).then((r) => r.text()),
+            fetch(`${base}/framer-motion.js`).then((r) => r.text()),
+            fetch(`${base}/recharts.js`).then((r) => r.text()),
+            fetch(`${base}/lucide-react.js`).then((r) => r.text()),
+        ]);
+        return { react, reactDom, framerMotion, recharts, lucideReact };
+    })();
+    bundleCache.set(key, p);
+    return p;
+}
+// ─── Validation helpers ──────────────────────────────────────────────────────
+function byteLength(s) {
+    return new TextEncoder().encode(s).length;
+}
+function validatePayload(props) {
+    if (!props.code || typeof props.code !== "string")
+        return "missing code";
+    if (byteLength(props.code) > MAX_CODE_BYTES)
+        return `code exceeds ${MAX_CODE_BYTES} bytes`;
+    if (props.initialProps) {
+        try {
+            const s = JSON.stringify(props.initialProps);
+            if (byteLength(s) > MAX_PROPS_BYTES)
+                return `initialProps exceeds ${MAX_PROPS_BYTES} bytes`;
+        }
+        catch {
+            return "initialProps not JSON-serializable";
+        }
+    }
+    if (props.imports) {
+        for (const imp of props.imports) {
+            if (!WHITELIST_MODULES.includes(imp.module)) {
+                return `import not in whitelist: ${imp.module}`;
+            }
+        }
+    }
+    return null;
+}
+// ─── Transpile user code ─────────────────────────────────────────────────────
+function compile(code, language) {
+    try {
+        const transforms = ["jsx", "imports"];
+        if (language === "tsx")
+            transforms.unshift("typescript");
+        const out = sucraseTransform(code, {
+            transforms,
+            production: true,
+            jsxRuntime: "classic",
+        });
+        return { ok: true, code: out.code };
+    }
+    catch (e) {
+        return { ok: false, error: e instanceof Error ? e.message : String(e) };
+    }
+}
+// ─── Build srcdoc ────────────────────────────────────────────────────────────
+function buildSrcDoc(bundles) {
+    return `<!doctype html><html><head><meta charset="utf-8"><style>
+  html,body{margin:0;padding:0;}
+  body{font:14px/1.5 system-ui,-apple-system,sans-serif;padding:12px;box-sizing:border-box;}
+  #root{min-height:0;}
+  *{box-sizing:border-box;}
+</style></head><body><div id="root"></div>
+<script>${bundles.react}<\/script>
+<script>${bundles.reactDom}<\/script>
+<script>${bundles.framerMotion}<\/script>
+<script>${bundles.recharts}<\/script>
+<script>${bundles.lucideReact}<\/script>
+<script>${SANDBOX_BOOTSTRAP}<\/script>
+</body></html>`;
+}
+// ─── Component ───────────────────────────────────────────────────────────────
+export const DisplayReactRenderer = memo(function DisplayReactRenderer(props) {
+    const { code, language = "jsx", initialProps, layout, theme = "auto", title, description, sandboxBase = "/sandbox", } = props;
+    const iframeRef = useRef(null);
+    const [height, setHeight] = useState(null);
+    const [error, setError] = useState(null);
+    const [status, setStatus] = useState("loading");
+    // Validate + compile once per payload
+    const compiled = useMemo(() => {
+        const validationError = validatePayload(props);
+        if (validationError)
+            return { ok: false, error: validationError };
+        return compile(code, language);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [code, language, JSON.stringify(props.imports), JSON.stringify(initialProps)]);
+    // Build + inject srcdoc once bundles are available
+    useEffect(() => {
+        if (compiled.ok === false) {
+            setError(compiled.error);
+            setStatus("error");
+            return;
+        }
+        let cancelled = false;
+        loadBundles(sandboxBase)
+            .then((bundles) => {
+            if (cancelled)
+                return;
+            const iframe = iframeRef.current;
+            if (!iframe)
+                return;
+            iframe.srcdoc = buildSrcDoc(bundles);
+        })
+            .catch((e) => {
+            if (cancelled)
+                return;
+            setError(`failed to load sandbox bundles: ${e instanceof Error ? e.message : String(e)}`);
+            setStatus("error");
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [compiled, sandboxBase]);
+    // postMessage pump: wait for sandbox-boot → send compiled code. Also capture height + ready.
+    useEffect(() => {
+        const handler = (ev) => {
+            const iframe = iframeRef.current;
+            if (!iframe || ev.source !== iframe.contentWindow)
+                return;
+            const data = ev.data;
+            if (!data || typeof data !== "object" || !data.type)
+                return;
+            if (data.type === "sandbox-boot") {
+                if (!compiled.ok)
+                    return;
+                iframe.contentWindow?.postMessage({
+                    type: "sandbox-render",
+                    compiledCode: compiled.code,
+                    payload: {
+                        initialProps: initialProps ?? {},
+                        theme,
+                    },
+                }, "*");
+            }
+            else if (data.type === "sandbox-ready") {
+                setStatus("ready");
+            }
+            else if (data.type === "sandbox-height" && typeof data.height === "number") {
+                if (layout?.height !== "auto" && typeof layout?.height === "number")
+                    return;
+                setHeight(data.height + 24); // padding from body
+            }
+        };
+        window.addEventListener("message", handler);
+        return () => window.removeEventListener("message", handler);
+    }, [compiled, initialProps, theme, layout?.height]);
+    // Compute iframe style
+    const iframeStyle = {
+        width: "100%",
+        maxWidth: layout?.maxWidth ? `${layout.maxWidth}px` : undefined,
+        aspectRatio: layout?.aspectRatio,
+        height: typeof layout?.height === "number"
+            ? `${layout.height}px`
+            : height !== null
+                ? `${height}px`
+                : "120px",
+        border: "1px solid var(--border, #e5e5e5)",
+        borderRadius: "8px",
+        display: "block",
+        background: "var(--bg, #fff)",
+    };
+    if (error || (compiled.ok === false)) {
+        const msg = error ?? (compiled.ok === false ? compiled.error : "unknown");
+        return (_jsxs("div", { className: "rounded-lg border border-red-300 bg-red-50 text-red-900 p-3 text-xs", children: [_jsx("div", { className: "font-semibold mb-1", children: "React sandbox error" }), _jsx("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px]", children: msg })] }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [(title || description) && (_jsxs("div", { className: "flex flex-col gap-0.5 px-0.5", children: [title && _jsx("div", { className: "text-sm font-semibold text-foreground", children: title }), description && _jsx("div", { className: "text-xs text-muted-foreground", children: description })] })), _jsx("iframe", { ref: iframeRef, sandbox: "allow-scripts", title: title ?? "react sandbox", style: iframeStyle, "aria-busy": status === "loading" })] }));
+});

package/dist/display/FileCardRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayFile } from "./sdk-types.js";
+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 "./sdk-types.js";
+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 "./sdk-types.js";
+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 "./sdk-types.js";
+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 "./sdk-types.js";
+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 "./sdk-types.js";
+export declare function MetricCardRenderer({ label, value, unit, trend }: DisplayMetric): import("react/jsx-runtime").JSX.Element;