@codrstudio/openclaude-chat 0.1.0

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 "./sdk-types.js";
+export declare function PriceHighlightRenderer({ value, label, context, source, badge }: DisplayPrice): import("react/jsx-runtime").JSX.Element;

package/dist/display/PriceHighlightRenderer.js

@@ -0,0 +1,30 @@
+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) {
+    // Fallbacks defensivos: se o modelo nao enviar currency ou enviar um valor
+    // invalido (ex: string vazia), caimos num formato numerico simples em vez de
+    // crashar a arvore React com "Currency code is required".
+    try {
+        return new Intl.NumberFormat("pt-BR", {
+            style: "currency",
+            currency: currency || "BRL",
+        }).format(value);
+    }
+    catch {
+        return new Intl.NumberFormat("pt-BR").format(value);
+    }
+}
+export function PriceHighlightRenderer({ value, label, context, source, badge }) {
+    // Tambem aceita value como numero flat (modelo pode nao seguir schema exato).
+    const amount = typeof value === "number"
+        ? value
+        : typeof value === "object" && value !== null && "value" in value
+            ? value.value
+            : 0;
+    const currency = typeof value === "object" && value !== null && "currency" in value
+        ? value.currency
+        : undefined;
+    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(amount, 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 "./sdk-types.js";
+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 "./sdk-types.js";
+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 "./sdk-types.js";
+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 "./sdk-types.js";
+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 "./sdk-types.js";
+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";

package/dist/display/index.js

@@ -0,0 +1,20 @@
+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";

package/dist/display/react-sandbox/bootstrap.d.ts

@@ -0,0 +1 @@
+export declare const SANDBOX_BOOTSTRAP = "\n(function() {\n  var WHITELIST = {\n    \"react\": \"__React\",\n    \"react-dom\": \"__ReactDOM\",\n    \"react-dom/client\": \"__ReactDOM\",\n    \"framer-motion\": \"__FramerMotion\",\n    \"recharts\": \"__Recharts\",\n    \"lucide-react\": \"__LucideReact\"\n  };\n\n  function getGlobal(name) {\n    return window[WHITELIST[name]];\n  }\n\n  function makeRequire() {\n    return function require(name) {\n      var g = getGlobal(name);\n      if (!g) throw new Error(\"sandbox: module not in whitelist: \" + name);\n      return g;\n    };\n  }\n\n  function renderError(title, detail) {\n    var root = document.getElementById(\"root\");\n    if (!root) return;\n    root.innerHTML = \"\";\n    var box = document.createElement(\"div\");\n    box.style.cssText = \"padding:12px 14px;border:1px solid #fca5a5;background:#fef2f2;color:#991b1b;border-radius:8px;font:12px/1.5 system-ui,sans-serif;\";\n    var t = document.createElement(\"div\");\n    t.style.cssText = \"font-weight:600;margin-bottom:4px;\";\n    t.textContent = title;\n    box.appendChild(t);\n    if (detail) {\n      var d = document.createElement(\"pre\");\n      d.style.cssText = \"margin:4px 0 0;white-space:pre-wrap;word-break:break-word;font:11px/1.4 ui-monospace,monospace;color:#7f1d1d;\";\n      d.textContent = String(detail);\n      box.appendChild(d);\n    }\n    root.appendChild(box);\n  }\n\n  function applyTheme(theme) {\n    var dark = theme === \"dark\" || (theme === \"auto\" && window.matchMedia && window.matchMedia(\"(prefers-color-scheme: dark)\").matches);\n    var root = document.documentElement;\n    if (dark) {\n      root.style.setProperty(\"--bg\", \"#0a0a0a\");\n      root.style.setProperty(\"--fg\", \"#fafafa\");\n      root.style.setProperty(\"--muted\", \"#a3a3a3\");\n      root.style.setProperty(\"--border\", \"#262626\");\n      root.style.setProperty(\"--accent\", \"#60a5fa\");\n      document.body.style.background = \"#0a0a0a\";\n      document.body.style.color = \"#fafafa\";\n    } else {\n      root.style.setProperty(\"--bg\", \"#ffffff\");\n      root.style.setProperty(\"--fg\", \"#0a0a0a\");\n      root.style.setProperty(\"--muted\", \"#737373\");\n      root.style.setProperty(\"--border\", \"#e5e5e5\");\n      root.style.setProperty(\"--accent\", \"#2563eb\");\n      document.body.style.background = \"#ffffff\";\n      document.body.style.color = \"#0a0a0a\";\n    }\n  }\n\n  function mount(payload, compiledCode) {\n    try {\n      var React = window.__React;\n      var ReactDOM = window.__ReactDOM;\n      var FramerMotion = window.__FramerMotion;\n      if (!React || !ReactDOM) {\n        renderError(\"Sandbox: React runtime missing\", \"__React/__ReactDOM not on window.\");\n        return;\n      }\n\n      applyTheme(payload.theme || \"auto\");\n\n      // Evaluate compiled CJS module. sucrase's \"imports\" transform produces code\n      // that expects exports/module/require in scope.\n      var moduleObj = { exports: {} };\n      var exportsObj = moduleObj.exports;\n      var requireFn = makeRequire();\n      var fn;\n      try {\n        // eslint-disable-next-line no-new-func\n        fn = new Function(\"exports\", \"module\", \"require\", \"React\", compiledCode);\n      } catch (e) {\n        renderError(\"Sandbox: compile error\", e && e.message);\n        return;\n      }\n      try {\n        fn(exportsObj, moduleObj, requireFn, React);\n      } catch (e) {\n        renderError(\"Sandbox: runtime error\", e && (e.stack || e.message));\n        return;\n      }\n      var Component = moduleObj.exports && (moduleObj.exports.default || moduleObj.exports);\n      if (typeof Component !== \"function\") {\n        renderError(\"Sandbox: no default export\", \"Expected 'export default function ...' but got: \" + typeof Component);\n        return;\n      }\n\n      // Minimal error boundary\n      var ErrorBoundary = (function() {\n        function EB(props) { React.Component.call(this, props); this.state = { err: null }; }\n        EB.prototype = Object.create(React.Component.prototype);\n        EB.prototype.constructor = EB;\n        EB.getDerivedStateFromError = function(err) { return { err: err }; };\n        EB.prototype.componentDidCatch = function(err) { renderError(\"Sandbox: render crash\", err && (err.stack || err.message)); };\n        EB.prototype.render = function() {\n          if (this.state.err) return null;\n          return this.props.children;\n        };\n        return EB;\n      })();\n\n      var root = document.getElementById(\"root\");\n      root.innerHTML = \"\";\n      var element = React.createElement(ErrorBoundary, null, React.createElement(Component, payload.initialProps || {}));\n      if (FramerMotion && FramerMotion.MotionConfig) {\n        element = React.createElement(FramerMotion.MotionConfig, { reducedMotion: \"user\" }, element);\n      }\n      var reactRoot = ReactDOM.createRoot(root);\n      reactRoot.render(element);\n\n      // ResizeObserver \u2192 notify parent of content height\n      if (typeof ResizeObserver !== \"undefined\") {\n        var ro = new ResizeObserver(function(entries) {\n          for (var i = 0; i < entries.length; i++) {\n            var h = Math.ceil(entries[i].contentRect.height);\n            window.parent.postMessage({ type: \"sandbox-height\", height: h }, \"*\");\n          }\n        });\n        ro.observe(root);\n      }\n\n      window.parent.postMessage({ type: \"sandbox-ready\" }, \"*\");\n    } catch (e) {\n      renderError(\"Sandbox: unexpected error\", e && (e.stack || e.message));\n    }\n  }\n\n  window.addEventListener(\"message\", function(ev) {\n    var data = ev.data;\n    if (!data || data.type !== \"sandbox-render\") return;\n    mount(data.payload, data.compiledCode);\n  });\n\n  // Signal parent we are alive and waiting for code\n  window.parent.postMessage({ type: \"sandbox-boot\" }, \"*\");\n})();\n";

package/dist/display/react-sandbox/bootstrap.js

@@ -0,0 +1,154 @@
+// The bootstrap script runs INSIDE the sandboxed iframe.
+// It is serialized to a string and embedded in the srcdoc HTML.
+// Keep it dependency-free — only browser APIs + the 5 globals injected via <script> tags.
+export const SANDBOX_BOOTSTRAP = `
+(function() {
+  var WHITELIST = {
+    "react": "__React",
+    "react-dom": "__ReactDOM",
+    "react-dom/client": "__ReactDOM",
+    "framer-motion": "__FramerMotion",
+    "recharts": "__Recharts",
+    "lucide-react": "__LucideReact"
+  };
+
+  function getGlobal(name) {
+    return window[WHITELIST[name]];
+  }
+
+  function makeRequire() {
+    return function require(name) {
+      var g = getGlobal(name);
+      if (!g) throw new Error("sandbox: module not in whitelist: " + name);
+      return g;
+    };
+  }
+
+  function renderError(title, detail) {
+    var root = document.getElementById("root");
+    if (!root) return;
+    root.innerHTML = "";
+    var box = document.createElement("div");
+    box.style.cssText = "padding:12px 14px;border:1px solid #fca5a5;background:#fef2f2;color:#991b1b;border-radius:8px;font:12px/1.5 system-ui,sans-serif;";
+    var t = document.createElement("div");
+    t.style.cssText = "font-weight:600;margin-bottom:4px;";
+    t.textContent = title;
+    box.appendChild(t);
+    if (detail) {
+      var d = document.createElement("pre");
+      d.style.cssText = "margin:4px 0 0;white-space:pre-wrap;word-break:break-word;font:11px/1.4 ui-monospace,monospace;color:#7f1d1d;";
+      d.textContent = String(detail);
+      box.appendChild(d);
+    }
+    root.appendChild(box);
+  }
+
+  function applyTheme(theme) {
+    var dark = theme === "dark" || (theme === "auto" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
+    var root = document.documentElement;
+    if (dark) {
+      root.style.setProperty("--bg", "#0a0a0a");
+      root.style.setProperty("--fg", "#fafafa");
+      root.style.setProperty("--muted", "#a3a3a3");
+      root.style.setProperty("--border", "#262626");
+      root.style.setProperty("--accent", "#60a5fa");
+      document.body.style.background = "#0a0a0a";
+      document.body.style.color = "#fafafa";
+    } else {
+      root.style.setProperty("--bg", "#ffffff");
+      root.style.setProperty("--fg", "#0a0a0a");
+      root.style.setProperty("--muted", "#737373");
+      root.style.setProperty("--border", "#e5e5e5");
+      root.style.setProperty("--accent", "#2563eb");
+      document.body.style.background = "#ffffff";
+      document.body.style.color = "#0a0a0a";
+    }
+  }
+
+  function mount(payload, compiledCode) {
+    try {
+      var React = window.__React;
+      var ReactDOM = window.__ReactDOM;
+      var FramerMotion = window.__FramerMotion;
+      if (!React || !ReactDOM) {
+        renderError("Sandbox: React runtime missing", "__React/__ReactDOM not on window.");
+        return;
+      }
+
+      applyTheme(payload.theme || "auto");
+
+      // Evaluate compiled CJS module. sucrase's "imports" transform produces code
+      // that expects exports/module/require in scope.
+      var moduleObj = { exports: {} };
+      var exportsObj = moduleObj.exports;
+      var requireFn = makeRequire();
+      var fn;
+      try {
+        // eslint-disable-next-line no-new-func
+        fn = new Function("exports", "module", "require", "React", compiledCode);
+      } catch (e) {
+        renderError("Sandbox: compile error", e && e.message);
+        return;
+      }
+      try {
+        fn(exportsObj, moduleObj, requireFn, React);
+      } catch (e) {
+        renderError("Sandbox: runtime error", e && (e.stack || e.message));
+        return;
+      }
+      var Component = moduleObj.exports && (moduleObj.exports.default || moduleObj.exports);
+      if (typeof Component !== "function") {
+        renderError("Sandbox: no default export", "Expected 'export default function ...' but got: " + typeof Component);
+        return;
+      }
+
+      // Minimal error boundary
+      var ErrorBoundary = (function() {
+        function EB(props) { React.Component.call(this, props); this.state = { err: null }; }
+        EB.prototype = Object.create(React.Component.prototype);
+        EB.prototype.constructor = EB;
+        EB.getDerivedStateFromError = function(err) { return { err: err }; };
+        EB.prototype.componentDidCatch = function(err) { renderError("Sandbox: render crash", err && (err.stack || err.message)); };
+        EB.prototype.render = function() {
+          if (this.state.err) return null;
+          return this.props.children;
+        };
+        return EB;
+      })();
+
+      var root = document.getElementById("root");
+      root.innerHTML = "";
+      var element = React.createElement(ErrorBoundary, null, React.createElement(Component, payload.initialProps || {}));
+      if (FramerMotion && FramerMotion.MotionConfig) {
+        element = React.createElement(FramerMotion.MotionConfig, { reducedMotion: "user" }, element);
+      }
+      var reactRoot = ReactDOM.createRoot(root);
+      reactRoot.render(element);
+
+      // ResizeObserver → notify parent of content height
+      if (typeof ResizeObserver !== "undefined") {
+        var ro = new ResizeObserver(function(entries) {
+          for (var i = 0; i < entries.length; i++) {
+            var h = Math.ceil(entries[i].contentRect.height);
+            window.parent.postMessage({ type: "sandbox-height", height: h }, "*");
+          }
+        });
+        ro.observe(root);
+      }
+
+      window.parent.postMessage({ type: "sandbox-ready" }, "*");
+    } catch (e) {
+      renderError("Sandbox: unexpected error", e && (e.stack || e.message));
+    }
+  }
+
+  window.addEventListener("message", function(ev) {
+    var data = ev.data;
+    if (!data || data.type !== "sandbox-render") return;
+    mount(data.payload, data.compiledCode);
+  });
+
+  // Signal parent we are alive and waiting for code
+  window.parent.postMessage({ type: "sandbox-boot" }, "*");
+})();
+`;

package/dist/display/registry.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from "react";
+export type DisplayActionName = "metric" | "price" | "alert" | "choices" | "table" | "spreadsheet" | "comparison" | "carousel" | "gallery" | "sources" | "product" | "link" | "file" | "image" | "chart" | "map" | "code" | "progress" | "steps" | "react";
+export type DisplayRendererMap = Partial<Record<string, ComponentType<any>>>;
+export declare const defaultDisplayRenderers: Record<DisplayActionName, ComponentType<any>>;
+export declare function resolveDisplayRenderer(action: string, overrides?: DisplayRendererMap): ComponentType<any> | null;

package/dist/display/registry.js

@@ -0,0 +1,52 @@
+import { AlertRenderer } from "./AlertRenderer.js";
+import { MetricCardRenderer } from "./MetricCardRenderer.js";
+import { PriceHighlightRenderer } from "./PriceHighlightRenderer.js";
+import { FileCardRenderer } from "./FileCardRenderer.js";
+import { CodeBlockRenderer } from "./CodeBlockRenderer.js";
+import { SourcesListRenderer } from "./SourcesListRenderer.js";
+import { StepTimelineRenderer } from "./StepTimelineRenderer.js";
+import { ProgressStepsRenderer } from "./ProgressStepsRenderer.js";
+import { ChartRenderer } from "./ChartRenderer.js";
+import { CarouselRenderer } from "./CarouselRenderer.js";
+import { ProductCardRenderer } from "./ProductCardRenderer.js";
+import { ComparisonTableRenderer } from "./ComparisonTableRenderer.js";
+import { DataTableRenderer } from "./DataTableRenderer.js";
+import { SpreadsheetRenderer } from "./SpreadsheetRenderer.js";
+import { GalleryRenderer } from "./GalleryRenderer.js";
+import { ImageViewerRenderer } from "./ImageViewerRenderer.js";
+import { LinkPreviewRenderer } from "./LinkPreviewRenderer.js";
+import { MapViewRenderer } from "./MapViewRenderer.js";
+import { ChoiceButtonsRenderer } from "./ChoiceButtonsRenderer.js";
+import { DisplayReactRenderer } from "./DisplayReactRenderer.js";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const defaultDisplayRenderers = {
+    // highlight
+    metric: MetricCardRenderer,
+    price: PriceHighlightRenderer,
+    alert: AlertRenderer,
+    choices: ChoiceButtonsRenderer,
+    // collection
+    table: DataTableRenderer,
+    spreadsheet: SpreadsheetRenderer,
+    comparison: ComparisonTableRenderer,
+    carousel: CarouselRenderer,
+    gallery: GalleryRenderer,
+    sources: SourcesListRenderer,
+    // card
+    product: ProductCardRenderer,
+    link: LinkPreviewRenderer,
+    file: FileCardRenderer,
+    image: ImageViewerRenderer,
+    // visual
+    chart: ChartRenderer,
+    map: MapViewRenderer,
+    code: CodeBlockRenderer,
+    progress: ProgressStepsRenderer,
+    steps: StepTimelineRenderer,
+    react: DisplayReactRenderer,
+};
+export function resolveDisplayRenderer(action, overrides) {
+    if (overrides?.[action])
+        return overrides[action];
+    return defaultDisplayRenderers[action] ?? null;
+}

package/dist/display/sdk-types.d.ts

@@ -0,0 +1,187 @@
+export type Money = {
+    value: number;
+    currency?: string;
+};
+export type SourceRef = {
+    name: string;
+    url: string;
+    favicon?: string;
+};
+export type DisplayBadge = {
+    label: string;
+    variant?: "default" | "success" | "warning" | "error" | "info";
+};
+export type DisplayMetric = {
+    label: string;
+    value: string | number;
+    unit?: string;
+    trend?: {
+        direction: "up" | "down" | "neutral";
+        value: string;
+    };
+    icon?: string;
+};
+export type DisplayChart = {
+    type: "bar" | "line" | "pie" | "area" | "donut";
+    title: string;
+    data: Array<{
+        label: string;
+        value: number;
+        color?: string;
+    }>;
+    format?: {
+        prefix?: string;
+        suffix?: string;
+        locale?: string;
+    };
+};
+export type DisplayTable = {
+    title?: string;
+    columns: Array<{
+        key: string;
+        label: string;
+        type?: "text" | "number" | "money" | "image" | "link" | "badge";
+        align?: "left" | "center" | "right";
+    }>;
+    rows: Array<Record<string, unknown>>;
+    sortable?: boolean;
+};
+export type DisplayProgress = {
+    title?: string;
+    steps: Array<{
+        label: string;
+        status: "completed" | "current" | "pending";
+        description?: string;
+    }>;
+};
+export type DisplayProduct = {
+    title: string;
+    image?: string;
+    price?: Money;
+    originalPrice?: Money;
+    rating?: {
+        score: number;
+        count: number;
+    };
+    source?: SourceRef;
+    badges?: DisplayBadge[];
+    url?: string;
+    description?: string;
+};
+export type DisplayComparison = {
+    title?: string;
+    items: DisplayProduct[];
+    attributes?: Array<{
+        key: string;
+        label: string;
+    }>;
+};
+export type DisplayPrice = {
+    value: Money;
+    label: string;
+    context?: string;
+    source?: SourceRef;
+    badge?: DisplayBadge;
+};
+export type DisplayImage = {
+    url: string;
+    alt?: string;
+    caption?: string;
+    width?: number;
+    height?: number;
+};
+export type DisplayGallery = {
+    title?: string;
+    images: Array<{
+        url: string;
+        alt?: string;
+        caption?: string;
+    }>;
+    layout?: "grid" | "masonry";
+    columns?: number;
+};
+export type DisplayCarousel = {
+    title?: string;
+    items: Array<{
+        image?: string;
+        title: string;
+        subtitle?: string;
+        price?: Money;
+        url?: string;
+        badges?: DisplayBadge[];
+    }>;
+};
+export type DisplaySources = {
+    label?: string;
+    sources: Array<{
+        title: string;
+        url: string;
+        favicon?: string;
+        snippet?: string;
+    }>;
+};
+export type DisplayLink = {
+    url: string;
+    title: string;
+    description?: string;
+    image?: string;
+    favicon?: string;
+    domain?: string;
+};
+export type DisplayMap = {
+    title?: string;
+    pins: Array<{
+        lat: number;
+        lng: number;
+        label?: string;
+        address?: string;
+    }>;
+    zoom?: number;
+};
+export type DisplayFile = {
+    name: string;
+    type: string;
+    size?: number;
+    url?: string;
+    preview?: string;
+};
+export type DisplayCode = {
+    language: string;
+    code: string;
+    title?: string;
+    lineNumbers?: boolean;
+};
+export type DisplaySpreadsheet = {
+    title?: string;
+    headers: string[];
+    rows: Array<Array<string | number | null>>;
+    format?: {
+        moneyColumns?: number[];
+        percentColumns?: number[];
+    };
+};
+export type DisplaySteps = {
+    title?: string;
+    steps: Array<{
+        title: string;
+        description?: string;
+        status?: "completed" | "current" | "pending";
+    }>;
+    orientation?: "vertical" | "horizontal";
+};
+export type DisplayAlert = {
+    variant: "info" | "warning" | "error" | "success";
+    title?: string;
+    message: string;
+    icon?: string;
+};
+export type DisplayChoices = {
+    question?: string;
+    choices: Array<{
+        id: string;
+        label: string;
+        description?: string;
+        icon?: string;
+    }>;
+    layout?: "buttons" | "cards" | "list";
+};

package/dist/display/sdk-types.js

@@ -0,0 +1,4 @@
+// Tipos dos display widgets — espelham os schemas em
+// D:\aw\context\workspaces\openclaude-sdk\repo\src\display\schemas.ts
+// Mantemos local para nao ter dependencia dura em typings da SDK.
+export {};