@codrstudio/openclaude-chat 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/StreamingIndicator.js +5 -5
- package/dist/display/DisplayReactRenderer.js +12 -12
- package/dist/display/react-sandbox/bootstrap.js +150 -150
- package/dist/styles.css +1 -2
- package/package.json +64 -61
- package/src/components/Chat.tsx +107 -107
- package/src/components/ErrorNote.tsx +35 -35
- package/src/components/LazyRender.tsx +42 -42
- package/src/components/Markdown.tsx +114 -114
- package/src/components/MessageBubble.tsx +107 -107
- package/src/components/MessageInput.tsx +421 -421
- package/src/components/MessageList.tsx +153 -153
- package/src/components/StreamingIndicator.tsx +19 -19
- package/src/display/AlertRenderer.tsx +23 -23
- package/src/display/CarouselRenderer.tsx +141 -141
- package/src/display/ChartRenderer.tsx +195 -195
- package/src/display/ChoiceButtonsRenderer.tsx +114 -114
- package/src/display/CodeBlockRenderer.tsx +49 -49
- package/src/display/ComparisonTableRenderer.tsx +132 -132
- package/src/display/DataTableRenderer.tsx +144 -144
- package/src/display/DisplayReactRenderer.tsx +269 -269
- package/src/display/FileCardRenderer.tsx +55 -55
- package/src/display/GalleryRenderer.tsx +65 -65
- package/src/display/ImageViewerRenderer.tsx +114 -114
- package/src/display/LinkPreviewRenderer.tsx +74 -74
- package/src/display/MapViewRenderer.tsx +75 -75
- package/src/display/MetricCardRenderer.tsx +29 -29
- package/src/display/PriceHighlightRenderer.tsx +62 -62
- package/src/display/ProductCardRenderer.tsx +112 -112
- package/src/display/ProgressStepsRenderer.tsx +59 -59
- package/src/display/SourcesListRenderer.tsx +47 -47
- package/src/display/SpreadsheetRenderer.tsx +86 -86
- package/src/display/StepTimelineRenderer.tsx +75 -75
- package/src/display/index.ts +21 -21
- package/src/display/react-sandbox/bootstrap.ts +155 -155
- package/src/display/registry.ts +84 -84
- package/src/display/sdk-types.ts +217 -217
- package/src/hooks/ChatProvider.tsx +21 -21
- package/src/hooks/useIsMobile.ts +15 -15
- package/src/hooks/useOpenClaudeChat.ts +476 -476
- package/src/index.ts +76 -76
- package/src/lib/utils.ts +6 -6
- package/src/parts/PartErrorBoundary.tsx +51 -51
- package/src/parts/PartRenderer.tsx +145 -145
- package/src/parts/ReasoningBlock.tsx +41 -41
- package/src/parts/ToolActivity.tsx +78 -78
- package/src/parts/ToolResult.tsx +79 -79
- package/src/styles.css +2 -2
- package/src/types.ts +41 -41
- package/src/ui/alert.tsx +77 -77
- package/src/ui/badge.tsx +36 -36
- package/src/ui/button.tsx +54 -54
- package/src/ui/card.tsx +68 -68
- package/src/ui/collapsible.tsx +7 -7
- package/src/ui/dialog.tsx +122 -122
- package/src/ui/dropdown-menu.tsx +76 -76
- package/src/ui/input.tsx +24 -24
- package/src/ui/progress.tsx +36 -36
- package/src/ui/scroll-area.tsx +48 -48
- package/src/ui/separator.tsx +31 -31
- package/src/ui/skeleton.tsx +9 -9
- package/src/ui/table.tsx +114 -114
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
export function StreamingIndicator() {
|
|
3
|
-
return (_jsxs("span", { className: "inline-flex items-end gap-1.5 py-1 mt-4", "aria-label": "Gerando resposta...", role: "status", children: [_jsx("span", { className: "size-1 rounded-full bg-primary animate-[streaming-bounce_1.2s_ease-in-out_infinite_0ms]" }), _jsx("span", { className: "size-1 rounded-full bg-primary animate-[streaming-bounce_1.2s_ease-in-out_infinite_150ms]" }), _jsx("span", { className: "size-1 rounded-full bg-primary animate-[streaming-bounce_1.2s_ease-in-out_infinite_300ms]" }), _jsx("style", { children: `
|
|
4
|
-
@keyframes streaming-bounce {
|
|
5
|
-
0%, 60%, 100% { transform: translateY(0); }
|
|
6
|
-
30% { transform: translateY(-4px); }
|
|
7
|
-
}
|
|
3
|
+
return (_jsxs("span", { className: "inline-flex items-end gap-1.5 py-1 mt-4", "aria-label": "Gerando resposta...", role: "status", children: [_jsx("span", { className: "size-1 rounded-full bg-primary animate-[streaming-bounce_1.2s_ease-in-out_infinite_0ms]" }), _jsx("span", { className: "size-1 rounded-full bg-primary animate-[streaming-bounce_1.2s_ease-in-out_infinite_150ms]" }), _jsx("span", { className: "size-1 rounded-full bg-primary animate-[streaming-bounce_1.2s_ease-in-out_infinite_300ms]" }), _jsx("style", { children: `
|
|
4
|
+
@keyframes streaming-bounce {
|
|
5
|
+
0%, 60%, 100% { transform: translateY(0); }
|
|
6
|
+
30% { transform: translateY(-4px); }
|
|
7
|
+
}
|
|
8
8
|
` })] }));
|
|
9
9
|
}
|
|
@@ -80,18 +80,18 @@ function compile(code, language) {
|
|
|
80
80
|
}
|
|
81
81
|
// ─── Build srcdoc ────────────────────────────────────────────────────────────
|
|
82
82
|
function buildSrcDoc(bundles) {
|
|
83
|
-
return `<!doctype html><html><head><meta charset="utf-8"><style>
|
|
84
|
-
html,body{margin:0;padding:0;}
|
|
85
|
-
body{font:14px/1.5 system-ui,-apple-system,sans-serif;padding:12px;box-sizing:border-box;}
|
|
86
|
-
#root{min-height:0;}
|
|
87
|
-
*{box-sizing:border-box;}
|
|
88
|
-
</style></head><body><div id="root"></div>
|
|
89
|
-
<script>${bundles.react}<\/script>
|
|
90
|
-
<script>${bundles.reactDom}<\/script>
|
|
91
|
-
<script>${bundles.framerMotion}<\/script>
|
|
92
|
-
<script>${bundles.recharts}<\/script>
|
|
93
|
-
<script>${bundles.lucideReact}<\/script>
|
|
94
|
-
<script>${SANDBOX_BOOTSTRAP}<\/script>
|
|
83
|
+
return `<!doctype html><html><head><meta charset="utf-8"><style>
|
|
84
|
+
html,body{margin:0;padding:0;}
|
|
85
|
+
body{font:14px/1.5 system-ui,-apple-system,sans-serif;padding:12px;box-sizing:border-box;}
|
|
86
|
+
#root{min-height:0;}
|
|
87
|
+
*{box-sizing:border-box;}
|
|
88
|
+
</style></head><body><div id="root"></div>
|
|
89
|
+
<script>${bundles.react}<\/script>
|
|
90
|
+
<script>${bundles.reactDom}<\/script>
|
|
91
|
+
<script>${bundles.framerMotion}<\/script>
|
|
92
|
+
<script>${bundles.recharts}<\/script>
|
|
93
|
+
<script>${bundles.lucideReact}<\/script>
|
|
94
|
+
<script>${SANDBOX_BOOTSTRAP}<\/script>
|
|
95
95
|
</body></html>`;
|
|
96
96
|
}
|
|
97
97
|
// ─── Component ───────────────────────────────────────────────────────────────
|
|
@@ -1,154 +1,154 @@
|
|
|
1
1
|
// The bootstrap script runs INSIDE the sandboxed iframe.
|
|
2
2
|
// It is serialized to a string and embedded in the srcdoc HTML.
|
|
3
3
|
// Keep it dependency-free — only browser APIs + the 5 globals injected via <script> tags.
|
|
4
|
-
export const SANDBOX_BOOTSTRAP = `
|
|
5
|
-
(function() {
|
|
6
|
-
var WHITELIST = {
|
|
7
|
-
"react": "__React",
|
|
8
|
-
"react-dom": "__ReactDOM",
|
|
9
|
-
"react-dom/client": "__ReactDOM",
|
|
10
|
-
"framer-motion": "__FramerMotion",
|
|
11
|
-
"recharts": "__Recharts",
|
|
12
|
-
"lucide-react": "__LucideReact"
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
function getGlobal(name) {
|
|
16
|
-
return window[WHITELIST[name]];
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function makeRequire() {
|
|
20
|
-
return function require(name) {
|
|
21
|
-
var g = getGlobal(name);
|
|
22
|
-
if (!g) throw new Error("sandbox: module not in whitelist: " + name);
|
|
23
|
-
return g;
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
function renderError(title, detail) {
|
|
28
|
-
var root = document.getElementById("root");
|
|
29
|
-
if (!root) return;
|
|
30
|
-
root.innerHTML = "";
|
|
31
|
-
var box = document.createElement("div");
|
|
32
|
-
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;";
|
|
33
|
-
var t = document.createElement("div");
|
|
34
|
-
t.style.cssText = "font-weight:600;margin-bottom:4px;";
|
|
35
|
-
t.textContent = title;
|
|
36
|
-
box.appendChild(t);
|
|
37
|
-
if (detail) {
|
|
38
|
-
var d = document.createElement("pre");
|
|
39
|
-
d.style.cssText = "margin:4px 0 0;white-space:pre-wrap;word-break:break-word;font:11px/1.4 ui-monospace,monospace;color:#7f1d1d;";
|
|
40
|
-
d.textContent = String(detail);
|
|
41
|
-
box.appendChild(d);
|
|
42
|
-
}
|
|
43
|
-
root.appendChild(box);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
function applyTheme(theme) {
|
|
47
|
-
var dark = theme === "dark" || (theme === "auto" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
|
|
48
|
-
var root = document.documentElement;
|
|
49
|
-
if (dark) {
|
|
50
|
-
root.style.setProperty("--bg", "#0a0a0a");
|
|
51
|
-
root.style.setProperty("--fg", "#fafafa");
|
|
52
|
-
root.style.setProperty("--muted", "#a3a3a3");
|
|
53
|
-
root.style.setProperty("--border", "#262626");
|
|
54
|
-
root.style.setProperty("--accent", "#60a5fa");
|
|
55
|
-
document.body.style.background = "#0a0a0a";
|
|
56
|
-
document.body.style.color = "#fafafa";
|
|
57
|
-
} else {
|
|
58
|
-
root.style.setProperty("--bg", "#ffffff");
|
|
59
|
-
root.style.setProperty("--fg", "#0a0a0a");
|
|
60
|
-
root.style.setProperty("--muted", "#737373");
|
|
61
|
-
root.style.setProperty("--border", "#e5e5e5");
|
|
62
|
-
root.style.setProperty("--accent", "#2563eb");
|
|
63
|
-
document.body.style.background = "#ffffff";
|
|
64
|
-
document.body.style.color = "#0a0a0a";
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
function mount(payload, compiledCode) {
|
|
69
|
-
try {
|
|
70
|
-
var React = window.__React;
|
|
71
|
-
var ReactDOM = window.__ReactDOM;
|
|
72
|
-
var FramerMotion = window.__FramerMotion;
|
|
73
|
-
if (!React || !ReactDOM) {
|
|
74
|
-
renderError("Sandbox: React runtime missing", "__React/__ReactDOM not on window.");
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
applyTheme(payload.theme || "auto");
|
|
79
|
-
|
|
80
|
-
// Evaluate compiled CJS module. sucrase's "imports" transform produces code
|
|
81
|
-
// that expects exports/module/require in scope.
|
|
82
|
-
var moduleObj = { exports: {} };
|
|
83
|
-
var exportsObj = moduleObj.exports;
|
|
84
|
-
var requireFn = makeRequire();
|
|
85
|
-
var fn;
|
|
86
|
-
try {
|
|
87
|
-
// eslint-disable-next-line no-new-func
|
|
88
|
-
fn = new Function("exports", "module", "require", "React", compiledCode);
|
|
89
|
-
} catch (e) {
|
|
90
|
-
renderError("Sandbox: compile error", e && e.message);
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
try {
|
|
94
|
-
fn(exportsObj, moduleObj, requireFn, React);
|
|
95
|
-
} catch (e) {
|
|
96
|
-
renderError("Sandbox: runtime error", e && (e.stack || e.message));
|
|
97
|
-
return;
|
|
98
|
-
}
|
|
99
|
-
var Component = moduleObj.exports && (moduleObj.exports.default || moduleObj.exports);
|
|
100
|
-
if (typeof Component !== "function") {
|
|
101
|
-
renderError("Sandbox: no default export", "Expected 'export default function ...' but got: " + typeof Component);
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
// Minimal error boundary
|
|
106
|
-
var ErrorBoundary = (function() {
|
|
107
|
-
function EB(props) { React.Component.call(this, props); this.state = { err: null }; }
|
|
108
|
-
EB.prototype = Object.create(React.Component.prototype);
|
|
109
|
-
EB.prototype.constructor = EB;
|
|
110
|
-
EB.getDerivedStateFromError = function(err) { return { err: err }; };
|
|
111
|
-
EB.prototype.componentDidCatch = function(err) { renderError("Sandbox: render crash", err && (err.stack || err.message)); };
|
|
112
|
-
EB.prototype.render = function() {
|
|
113
|
-
if (this.state.err) return null;
|
|
114
|
-
return this.props.children;
|
|
115
|
-
};
|
|
116
|
-
return EB;
|
|
117
|
-
})();
|
|
118
|
-
|
|
119
|
-
var root = document.getElementById("root");
|
|
120
|
-
root.innerHTML = "";
|
|
121
|
-
var element = React.createElement(ErrorBoundary, null, React.createElement(Component, payload.initialProps || {}));
|
|
122
|
-
if (FramerMotion && FramerMotion.MotionConfig) {
|
|
123
|
-
element = React.createElement(FramerMotion.MotionConfig, { reducedMotion: "user" }, element);
|
|
124
|
-
}
|
|
125
|
-
var reactRoot = ReactDOM.createRoot(root);
|
|
126
|
-
reactRoot.render(element);
|
|
127
|
-
|
|
128
|
-
// ResizeObserver → notify parent of content height
|
|
129
|
-
if (typeof ResizeObserver !== "undefined") {
|
|
130
|
-
var ro = new ResizeObserver(function(entries) {
|
|
131
|
-
for (var i = 0; i < entries.length; i++) {
|
|
132
|
-
var h = Math.ceil(entries[i].contentRect.height);
|
|
133
|
-
window.parent.postMessage({ type: "sandbox-height", height: h }, "*");
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
ro.observe(root);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
window.parent.postMessage({ type: "sandbox-ready" }, "*");
|
|
140
|
-
} catch (e) {
|
|
141
|
-
renderError("Sandbox: unexpected error", e && (e.stack || e.message));
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
window.addEventListener("message", function(ev) {
|
|
146
|
-
var data = ev.data;
|
|
147
|
-
if (!data || data.type !== "sandbox-render") return;
|
|
148
|
-
mount(data.payload, data.compiledCode);
|
|
149
|
-
});
|
|
150
|
-
|
|
151
|
-
// Signal parent we are alive and waiting for code
|
|
152
|
-
window.parent.postMessage({ type: "sandbox-boot" }, "*");
|
|
153
|
-
})();
|
|
4
|
+
export const SANDBOX_BOOTSTRAP = `
|
|
5
|
+
(function() {
|
|
6
|
+
var WHITELIST = {
|
|
7
|
+
"react": "__React",
|
|
8
|
+
"react-dom": "__ReactDOM",
|
|
9
|
+
"react-dom/client": "__ReactDOM",
|
|
10
|
+
"framer-motion": "__FramerMotion",
|
|
11
|
+
"recharts": "__Recharts",
|
|
12
|
+
"lucide-react": "__LucideReact"
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
function getGlobal(name) {
|
|
16
|
+
return window[WHITELIST[name]];
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
function makeRequire() {
|
|
20
|
+
return function require(name) {
|
|
21
|
+
var g = getGlobal(name);
|
|
22
|
+
if (!g) throw new Error("sandbox: module not in whitelist: " + name);
|
|
23
|
+
return g;
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function renderError(title, detail) {
|
|
28
|
+
var root = document.getElementById("root");
|
|
29
|
+
if (!root) return;
|
|
30
|
+
root.innerHTML = "";
|
|
31
|
+
var box = document.createElement("div");
|
|
32
|
+
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;";
|
|
33
|
+
var t = document.createElement("div");
|
|
34
|
+
t.style.cssText = "font-weight:600;margin-bottom:4px;";
|
|
35
|
+
t.textContent = title;
|
|
36
|
+
box.appendChild(t);
|
|
37
|
+
if (detail) {
|
|
38
|
+
var d = document.createElement("pre");
|
|
39
|
+
d.style.cssText = "margin:4px 0 0;white-space:pre-wrap;word-break:break-word;font:11px/1.4 ui-monospace,monospace;color:#7f1d1d;";
|
|
40
|
+
d.textContent = String(detail);
|
|
41
|
+
box.appendChild(d);
|
|
42
|
+
}
|
|
43
|
+
root.appendChild(box);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function applyTheme(theme) {
|
|
47
|
+
var dark = theme === "dark" || (theme === "auto" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
|
|
48
|
+
var root = document.documentElement;
|
|
49
|
+
if (dark) {
|
|
50
|
+
root.style.setProperty("--bg", "#0a0a0a");
|
|
51
|
+
root.style.setProperty("--fg", "#fafafa");
|
|
52
|
+
root.style.setProperty("--muted", "#a3a3a3");
|
|
53
|
+
root.style.setProperty("--border", "#262626");
|
|
54
|
+
root.style.setProperty("--accent", "#60a5fa");
|
|
55
|
+
document.body.style.background = "#0a0a0a";
|
|
56
|
+
document.body.style.color = "#fafafa";
|
|
57
|
+
} else {
|
|
58
|
+
root.style.setProperty("--bg", "#ffffff");
|
|
59
|
+
root.style.setProperty("--fg", "#0a0a0a");
|
|
60
|
+
root.style.setProperty("--muted", "#737373");
|
|
61
|
+
root.style.setProperty("--border", "#e5e5e5");
|
|
62
|
+
root.style.setProperty("--accent", "#2563eb");
|
|
63
|
+
document.body.style.background = "#ffffff";
|
|
64
|
+
document.body.style.color = "#0a0a0a";
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function mount(payload, compiledCode) {
|
|
69
|
+
try {
|
|
70
|
+
var React = window.__React;
|
|
71
|
+
var ReactDOM = window.__ReactDOM;
|
|
72
|
+
var FramerMotion = window.__FramerMotion;
|
|
73
|
+
if (!React || !ReactDOM) {
|
|
74
|
+
renderError("Sandbox: React runtime missing", "__React/__ReactDOM not on window.");
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
applyTheme(payload.theme || "auto");
|
|
79
|
+
|
|
80
|
+
// Evaluate compiled CJS module. sucrase's "imports" transform produces code
|
|
81
|
+
// that expects exports/module/require in scope.
|
|
82
|
+
var moduleObj = { exports: {} };
|
|
83
|
+
var exportsObj = moduleObj.exports;
|
|
84
|
+
var requireFn = makeRequire();
|
|
85
|
+
var fn;
|
|
86
|
+
try {
|
|
87
|
+
// eslint-disable-next-line no-new-func
|
|
88
|
+
fn = new Function("exports", "module", "require", "React", compiledCode);
|
|
89
|
+
} catch (e) {
|
|
90
|
+
renderError("Sandbox: compile error", e && e.message);
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
try {
|
|
94
|
+
fn(exportsObj, moduleObj, requireFn, React);
|
|
95
|
+
} catch (e) {
|
|
96
|
+
renderError("Sandbox: runtime error", e && (e.stack || e.message));
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
var Component = moduleObj.exports && (moduleObj.exports.default || moduleObj.exports);
|
|
100
|
+
if (typeof Component !== "function") {
|
|
101
|
+
renderError("Sandbox: no default export", "Expected 'export default function ...' but got: " + typeof Component);
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Minimal error boundary
|
|
106
|
+
var ErrorBoundary = (function() {
|
|
107
|
+
function EB(props) { React.Component.call(this, props); this.state = { err: null }; }
|
|
108
|
+
EB.prototype = Object.create(React.Component.prototype);
|
|
109
|
+
EB.prototype.constructor = EB;
|
|
110
|
+
EB.getDerivedStateFromError = function(err) { return { err: err }; };
|
|
111
|
+
EB.prototype.componentDidCatch = function(err) { renderError("Sandbox: render crash", err && (err.stack || err.message)); };
|
|
112
|
+
EB.prototype.render = function() {
|
|
113
|
+
if (this.state.err) return null;
|
|
114
|
+
return this.props.children;
|
|
115
|
+
};
|
|
116
|
+
return EB;
|
|
117
|
+
})();
|
|
118
|
+
|
|
119
|
+
var root = document.getElementById("root");
|
|
120
|
+
root.innerHTML = "";
|
|
121
|
+
var element = React.createElement(ErrorBoundary, null, React.createElement(Component, payload.initialProps || {}));
|
|
122
|
+
if (FramerMotion && FramerMotion.MotionConfig) {
|
|
123
|
+
element = React.createElement(FramerMotion.MotionConfig, { reducedMotion: "user" }, element);
|
|
124
|
+
}
|
|
125
|
+
var reactRoot = ReactDOM.createRoot(root);
|
|
126
|
+
reactRoot.render(element);
|
|
127
|
+
|
|
128
|
+
// ResizeObserver → notify parent of content height
|
|
129
|
+
if (typeof ResizeObserver !== "undefined") {
|
|
130
|
+
var ro = new ResizeObserver(function(entries) {
|
|
131
|
+
for (var i = 0; i < entries.length; i++) {
|
|
132
|
+
var h = Math.ceil(entries[i].contentRect.height);
|
|
133
|
+
window.parent.postMessage({ type: "sandbox-height", height: h }, "*");
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
ro.observe(root);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
window.parent.postMessage({ type: "sandbox-ready" }, "*");
|
|
140
|
+
} catch (e) {
|
|
141
|
+
renderError("Sandbox: unexpected error", e && (e.stack || e.message));
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
window.addEventListener("message", function(ev) {
|
|
146
|
+
var data = ev.data;
|
|
147
|
+
if (!data || data.type !== "sandbox-render") return;
|
|
148
|
+
mount(data.payload, data.compiledCode);
|
|
149
|
+
});
|
|
150
|
+
|
|
151
|
+
// Signal parent we are alive and waiting for code
|
|
152
|
+
window.parent.postMessage({ type: "sandbox-boot" }, "*");
|
|
153
|
+
})();
|
|
154
154
|
`;
|
package/dist/styles.css
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial}}}@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-\[50\%\]{top:50%}.bottom-full{bottom:100%}.left-\[50\%\]{left:50%}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-row{display:table-row}.aspect-square{aspect-ratio:1}.h-\[1px\]{height:1px}.h-full{height:100%}.h-px{height:1px}.max-h-\[80vh\]{max-height:80vh}.min-h-\[44px\]{min-height:44px}.min-h-\[56px\]{min-height:56px}.min-h-\[200px\]{min-height:200px}.min-h-svh{min-height:100svh}.w-\[1px\]{width:1px}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-\[80\%\]{max-width:80%}.max-w-\[120px\]{max-width:120px}.max-w-\[300px\]{max-width:300px}.max-w-\[400px\]{max-width:400px}.max-w-\[425px\]{max-width:425px}.max-w-full{max-width:100%}.min-w-\[8rem\]{min-width:8rem}.min-w-\[160px\]{min-width:160px}.flex-1{flex:1}.flex-\[0_0_80\%\]{flex:0 0 80%}.flex-shrink-0,.shrink-0{flex-shrink:0}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-\[streaming-bounce_1\.2s_ease-in-out_infinite_0ms\]{animation:1.2s ease-in-out infinite streaming-bounce}.animate-\[streaming-bounce_1\.2s_ease-in-out_infinite_150ms\]{animation:1.2s ease-in-out .15s infinite streaming-bounce}.animate-\[streaming-bounce_1\.2s_ease-in-out_infinite_300ms\]{animation:1.2s ease-in-out .3s infinite streaming-bounce}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-\[inherit\]{border-radius:inherit}.rounded-\[min\(var\(--radius-md\)\,10px\)\]{border-radius:min(var(--radius-md), 10px)}.rounded-\[min\(var\(--radius-md\)\,12px\)\]{border-radius:min(var(--radius-md), 12px)}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-\[3px\]{border-left-style:var(--tw-border-style);border-left-width:3px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-transparent{border-color:#0000}.border-t-transparent{border-top-color:#0000}.border-l-transparent{border-left-color:#0000}.bg-transparent{background-color:#0000}.bg-clip-padding{background-clip:padding-box}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-\[1px\]{padding:1px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-\[0\.8rem\]{font-size:.8rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.text-balance{text-wrap:balance}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-inherit{color:inherit}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.ring,.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-\[border-radius\]{transition-property:border-radius;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-\[margin-left\]{transition-property:margin-left;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *),.group-hover\/bubble\:opacity-100:is(:where(.group\/bubble):hover *){opacity:1}}.group-has-\[\>svg\]\/alert\:col-start-2:is(:where(.group\/alert):has(>svg) *){grid-column-start:2}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}@media (hover:hover){.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-100:hover{opacity:1}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-3:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:scale-\[0\.98\]:active{scale:.98}.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]){--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-data-\[slot\=alert-action\]\:relative:has([data-slot=alert-action]){position:relative}.has-\[\>svg\]\:grid-cols-\[auto_1fr\]:has(>svg){grid-template-columns:auto 1fr}.aria-invalid\:ring-3[aria-invalid=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.\[\&_a\]\:underline a{text-decoration-line:underline}.\[\&_a\]\:underline-offset-3 a{text-underline-offset:3px}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}:is(.\*\:\[svg\]\:row-span-2>*):is(svg){grid-row:span 2/span 2}:is(.\*\:\[svg\]\:text-current>*):is(svg){color:currentColor}.\[\&\>tr\]\:last\:border-b-0>tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}
|
|
1
|
+
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer properties;@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}.absolute,.sr-only{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-\[50\%\]{top:50%}.bottom-full{bottom:100%}.left-\[50\%\]{left:50%}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.ml-auto{margin-left:auto}.line-clamp-2{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-row{display:table-row}.aspect-square{aspect-ratio:1/1}.h-\[1px\]{height:1px}.h-full{height:100%}.h-px{height:1px}.max-h-\[80vh\]{max-height:80vh}.min-h-\[44px\]{min-height:44px}.min-h-\[56px\]{min-height:56px}.min-h-\[200px\]{min-height:200px}.min-h-svh{min-height:100svh}.w-\[1px\]{width:1px}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-\[80\%\]{max-width:80%}.max-w-\[120px\]{max-width:120px}.max-w-\[300px\]{max-width:300px}.max-w-\[400px\]{max-width:400px}.max-w-\[425px\]{max-width:425px}.max-w-full{max-width:100%}.min-w-\[8rem\]{min-width:8rem}.min-w-\[160px\]{min-width:160px}.flex-1{flex:1}.flex-\[0_0_80\%\]{flex:0 0 80%}.flex-shrink-0,.shrink-0{flex-shrink:0}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.translate-x-\[-50\%\]{--tw-translate-x:-50%}.translate-x-\[-50\%\],.translate-y-\[-50\%\]{translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-\[streaming-bounce_1\.2s_ease-in-out_infinite_0ms\]{animation:streaming-bounce 1.2s ease-in-out 0s infinite}.animate-\[streaming-bounce_1\.2s_ease-in-out_infinite_150ms\]{animation:streaming-bounce 1.2s ease-in-out .15s infinite}.animate-\[streaming-bounce_1\.2s_ease-in-out_infinite_300ms\]{animation:streaming-bounce 1.2s ease-in-out .3s infinite}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-\[inherit\]{border-radius:inherit}.rounded-\[min\(var\(--radius-md\)\,10px\)\]{border-radius:min(var(--radius-md),10px)}.rounded-\[min\(var\(--radius-md\)\,12px\)\]{border-radius:min(var(--radius-md),12px)}.rounded-full{border-radius:calc(infinity*1px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-\[3px\]{border-left-style:var(--tw-border-style);border-left-width:3px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-transparent{border-color:transparent}.border-t-transparent{border-top-color:transparent}.border-l-transparent{border-left-color:transparent}.bg-transparent{background-color:transparent}.bg-clip-padding{background-clip:padding-box}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-\[1px\]{padding:1px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-\[0\.8rem\]{font-size:.8rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.text-balance{text-wrap:balance}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-inherit{color:inherit}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-10{opacity:10%}.opacity-50{opacity:50%}.opacity-70{opacity:70%}.ring,.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)}.ring,.ring-1,.ring-2{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-duration:var(--tw-duration,0s);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease)}.transition-\[border-radius\]{transition-duration:var(--tw-duration,0s);transition-property:border-radius;transition-timing-function:var(--tw-ease,ease)}.transition-\[margin-left\]{transition-duration:var(--tw-duration,0s);transition-property:margin-left;transition-timing-function:var(--tw-ease,ease)}.transition-\[width\]{transition-duration:var(--tw-duration,0s);transition-property:width;transition-timing-function:var(--tw-ease,ease)}.transition-all{transition-duration:var(--tw-duration,0s);transition-property:all;transition-timing-function:var(--tw-ease,ease)}.transition-colors{transition-duration:var(--tw-duration,0s);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease)}.transition-opacity{transition-duration:var(--tw-duration,0s);transition-property:opacity;transition-timing-function:var(--tw-ease,ease)}.transition-transform{transition-duration:var(--tw-duration,0s);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease)}.duration-200{--tw-duration:200ms;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.group-hover\:opacity-100{&:is(:where(.group):hover *){@media (hover:hover){opacity:100%}}}.group-hover\/bubble\:opacity-100{&:is(:where(.group\/bubble):hover *){@media (hover:hover){opacity:100%}}}.group-has-\[\>svg\]\/alert\:col-start-2{&:is(:where(.group\/alert):has(>svg) *){grid-column-start:2}}.file\:border-0{&::file-selector-button{border-style:var(--tw-border-style);border-width:0}}.file\:bg-transparent{&::file-selector-button{background-color:transparent}}.hover\:underline{&:hover{@media (hover:hover){text-decoration-line:underline}}}.hover\:opacity-80{&:hover{@media (hover:hover){opacity:80%}}}.hover\:opacity-100{&:hover{@media (hover:hover){opacity:100%}}}.focus\:ring-2{&:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:ring-offset-2{&:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}}.focus\:outline-none{&:focus{--tw-outline-style:none;outline-style:none}}.focus-visible\:ring-1{&:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus-visible\:ring-2{&:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus-visible\:ring-3{&:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus-visible\:ring-offset-2{&:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}}.focus-visible\:outline-none{&:focus-visible{--tw-outline-style:none;outline-style:none}}.active\:scale-\[0\.98\]{&:active{scale:.98}}.active\:not-aria-\[haspopup\]\:translate-y-px{&:active{&:not([aria-haspopup]){--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}}}.disabled\:pointer-events-none{&:disabled{pointer-events:none}}.disabled\:cursor-not-allowed{&:disabled{cursor:not-allowed}}.disabled\:opacity-50{&:disabled{opacity:50%}}.has-data-\[slot\=alert-action\]\:relative{&:has([data-slot=alert-action]){position:relative}}.has-\[\>svg\]\:grid-cols-\[auto_1fr\]{&:has(>svg){grid-template-columns:auto 1fr}}.aria-invalid\:ring-3{&[aria-invalid=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.data-\[disabled\]\:pointer-events-none{&[data-disabled]{pointer-events:none}}.data-\[disabled\]\:opacity-50{&[data-disabled]{opacity:50%}}.\[\&_a\]\:underline{& a{text-decoration-line:underline}}.\[\&_a\]\:underline-offset-3{& a{text-underline-offset:3px}}.\[\&_svg\]\:pointer-events-none{& svg{pointer-events:none}}.\[\&_svg\]\:shrink-0{& svg{flex-shrink:0}}.\[\&_tr\]\:border-b{& tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}}.\[\&_tr\:last-child\]\:border-0{& tr:last-child{border-style:var(--tw-border-style);border-width:0}}.\*\:\[svg\]\:row-span-2{:is(&>*){&:is(svg){grid-row:span 2/span 2}}}.\*\:\[svg\]\:text-current{:is(&>*){&:is(svg){color:currentcolor}}}.\[\&\>tr\]\:last\:border-b-0{&>tr{&:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial}}}
|
package/package.json
CHANGED
|
@@ -1,61 +1,64 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@codrstudio/openclaude-chat",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Rich chat UI component — HTTP+SSE counterpart to @codrstudio/openclaude-sdk. Shadcn-native (consumes host tokens).",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "dist/index.js",
|
|
7
|
-
"types": "dist/index.d.ts",
|
|
8
|
-
"exports": {
|
|
9
|
-
".": {
|
|
10
|
-
"types": "./dist/index.d.ts",
|
|
11
|
-
"default": "./dist/index.js"
|
|
12
|
-
},
|
|
13
|
-
"./styles.css": "./dist/styles.css"
|
|
14
|
-
},
|
|
15
|
-
"files": [
|
|
16
|
-
"dist",
|
|
17
|
-
"src",
|
|
18
|
-
"README.md"
|
|
19
|
-
],
|
|
20
|
-
"scripts": {
|
|
21
|
-
"build": "tsc &&
|
|
22
|
-
"build:ts": "tsc",
|
|
23
|
-
"build:css": "
|
|
24
|
-
"typecheck": "tsc --noEmit"
|
|
25
|
-
},
|
|
26
|
-
"peerDependencies": {
|
|
27
|
-
"react": "^18 || ^19",
|
|
28
|
-
"react-dom": "^18 || ^19"
|
|
29
|
-
},
|
|
30
|
-
"dependencies": {
|
|
31
|
-
"@radix-ui/react-collapsible": "^1",
|
|
32
|
-
"@radix-ui/react-dialog": "^1",
|
|
33
|
-
"@radix-ui/react-dropdown-menu": "^2",
|
|
34
|
-
"@radix-ui/react-scroll-area": "^1",
|
|
35
|
-
"@radix-ui/react-separator": "^1",
|
|
36
|
-
"@tanstack/react-virtual": "^3.13.23",
|
|
37
|
-
"class-variance-authority": "^0.7",
|
|
38
|
-
"clsx": "^2",
|
|
39
|
-
"embla-carousel-react": "^8",
|
|
40
|
-
"framer-motion": "^12.38.0",
|
|
41
|
-
"lucide-react": "^0.400.0",
|
|
42
|
-
"react-markdown": "^9",
|
|
43
|
-
"recharts": "^2",
|
|
44
|
-
"rehype-highlight": "^7",
|
|
45
|
-
"remark-gfm": "^4",
|
|
46
|
-
"sucrase": "^3.35.1",
|
|
47
|
-
"tailwind-merge": "^3"
|
|
48
|
-
},
|
|
49
|
-
"devDependencies": {
|
|
50
|
-
"@tailwindcss/
|
|
51
|
-
"@types/react": "^19",
|
|
52
|
-
"@types/react-dom": "^19",
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@codrstudio/openclaude-chat",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Rich chat UI component — HTTP+SSE counterpart to @codrstudio/openclaude-sdk. Shadcn-native (consumes host tokens).",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"default": "./dist/index.js"
|
|
12
|
+
},
|
|
13
|
+
"./styles.css": "./dist/styles.css"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"src",
|
|
18
|
+
"README.md"
|
|
19
|
+
],
|
|
20
|
+
"scripts": {
|
|
21
|
+
"build": "tsc && postcss src/styles.css -o dist/styles.css",
|
|
22
|
+
"build:ts": "tsc",
|
|
23
|
+
"build:css": "postcss src/styles.css -o dist/styles.css",
|
|
24
|
+
"typecheck": "tsc --noEmit"
|
|
25
|
+
},
|
|
26
|
+
"peerDependencies": {
|
|
27
|
+
"react": "^18 || ^19",
|
|
28
|
+
"react-dom": "^18 || ^19"
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"@radix-ui/react-collapsible": "^1",
|
|
32
|
+
"@radix-ui/react-dialog": "^1",
|
|
33
|
+
"@radix-ui/react-dropdown-menu": "^2",
|
|
34
|
+
"@radix-ui/react-scroll-area": "^1",
|
|
35
|
+
"@radix-ui/react-separator": "^1",
|
|
36
|
+
"@tanstack/react-virtual": "^3.13.23",
|
|
37
|
+
"class-variance-authority": "^0.7",
|
|
38
|
+
"clsx": "^2",
|
|
39
|
+
"embla-carousel-react": "^8",
|
|
40
|
+
"framer-motion": "^12.38.0",
|
|
41
|
+
"lucide-react": "^0.400.0",
|
|
42
|
+
"react-markdown": "^9",
|
|
43
|
+
"recharts": "^2",
|
|
44
|
+
"rehype-highlight": "^7",
|
|
45
|
+
"remark-gfm": "^4",
|
|
46
|
+
"sucrase": "^3.35.1",
|
|
47
|
+
"tailwind-merge": "^3"
|
|
48
|
+
},
|
|
49
|
+
"devDependencies": {
|
|
50
|
+
"@tailwindcss/postcss": "^4.2.2",
|
|
51
|
+
"@types/react": "^19",
|
|
52
|
+
"@types/react-dom": "^19",
|
|
53
|
+
"cssnano": "^7.1.4",
|
|
54
|
+
"postcss": "^8.5.9",
|
|
55
|
+
"postcss-cli": "^11.0.1",
|
|
56
|
+
"tailwindcss": "^4",
|
|
57
|
+
"typescript": "^5"
|
|
58
|
+
},
|
|
59
|
+
"license": "MIT",
|
|
60
|
+
"repository": {
|
|
61
|
+
"type": "git",
|
|
62
|
+
"url": "git+https://github.com/codrstudio/openclaude-chat.git"
|
|
63
|
+
}
|
|
64
|
+
}
|