artifactuse 0.2.0 → 0.2.2
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/core/index.d.ts +11 -0
- package/dist/core/state.d.ts +6 -0
- package/dist/{index-llShix6s.js → index-INYOxlcg.js} +1134 -910
- package/dist/index.js +1 -1
- package/dist/react/index.js +408 -389
- package/dist/styles/components/panel.css +106 -0
- package/dist/svelte/index.d.ts +42 -0
- package/dist/svelte/index.js +1915 -1875
- package/dist/vue/index.d.ts +32 -0
- package/dist/vue/index.js +1258 -1191
- package/dist/vue2/composables.d.ts +32 -0
- package/dist/vue2/index.js +535 -57
- package/package.json +1 -1
package/dist/react/index.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import e, { useState as
|
|
2
|
-
import { g as Ue, f as
|
|
3
|
-
import { J as
|
|
4
|
-
import { createPortal as
|
|
5
|
-
function
|
|
1
|
+
import e, { useState as w, useMemo as C, useCallback as p, useRef as B, useEffect as z, createContext as Vt, useContext as zt } from "react";
|
|
2
|
+
import { g as Ue, f as ht, a as at, b as rt, n as Rt, i as pt, c as qt, D as gt, d as Dt } from "../index-INYOxlcg.js";
|
|
3
|
+
import { J as Ut } from "../jszip.min-CdmYyw5L.js";
|
|
4
|
+
import { createPortal as jt } from "react-dom";
|
|
5
|
+
function Ot({
|
|
6
6
|
artifact: t,
|
|
7
7
|
isActive: a = !1,
|
|
8
8
|
onOpen: l,
|
|
9
9
|
onCopy: n,
|
|
10
10
|
onDownload: i,
|
|
11
|
-
className:
|
|
11
|
+
className: m = ""
|
|
12
12
|
}) {
|
|
13
|
-
const [
|
|
13
|
+
const [u, r] = w(!1), x = C(() => Ue(t.language), [t.language]), o = C(() => {
|
|
14
14
|
var c;
|
|
15
|
-
return
|
|
16
|
-
}, [t.size, t.code]),
|
|
15
|
+
return ht(t.size || ((c = t.code) == null ? void 0 : c.length) || 0);
|
|
16
|
+
}, [t.size, t.code]), k = C(() => at(t.language), [t.language]), M = p((c) => {
|
|
17
17
|
c.stopPropagation(), l && l(t);
|
|
18
|
-
}, [t, l]),
|
|
18
|
+
}, [t, l]), T = p(async (c) => {
|
|
19
19
|
c.stopPropagation();
|
|
20
20
|
try {
|
|
21
21
|
await navigator.clipboard.writeText(t.code), r(!0), n && n(t), setTimeout(() => {
|
|
@@ -41,25 +41,25 @@ function jt({
|
|
|
41
41
|
}, [t, i]), h = [
|
|
42
42
|
"artifactuse-card",
|
|
43
43
|
a && "artifactuse-card--active",
|
|
44
|
-
|
|
44
|
+
m
|
|
45
45
|
].filter(Boolean).join(" ");
|
|
46
|
-
return /* @__PURE__ */ e.createElement("div", { className: h, onClick:
|
|
46
|
+
return /* @__PURE__ */ e.createElement("div", { className: h, onClick: M }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-card__icon" }, /* @__PURE__ */ e.createElement(
|
|
47
47
|
"svg",
|
|
48
48
|
{
|
|
49
49
|
viewBox: "0 0 24 24",
|
|
50
50
|
fill: "none",
|
|
51
51
|
stroke: "currentColor",
|
|
52
52
|
strokeWidth: "1.5",
|
|
53
|
-
dangerouslySetInnerHTML: { __html:
|
|
53
|
+
dangerouslySetInnerHTML: { __html: k }
|
|
54
54
|
}
|
|
55
55
|
)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-card__content" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-card__title" }, t.title), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-card__meta" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-card__type" }, x), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-card__separator" }, "•"), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-card__size" }, o))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-card__actions" }, /* @__PURE__ */ e.createElement(
|
|
56
56
|
"button",
|
|
57
57
|
{
|
|
58
58
|
className: "artifactuse-card__action",
|
|
59
|
-
title:
|
|
60
|
-
onClick:
|
|
59
|
+
title: u ? "Copied!" : "Copy code",
|
|
60
|
+
onClick: T
|
|
61
61
|
},
|
|
62
|
-
|
|
62
|
+
u ? /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "20 6 9 17 4 12" })) : /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), /* @__PURE__ */ e.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }))
|
|
63
63
|
), /* @__PURE__ */ e.createElement(
|
|
64
64
|
"button",
|
|
65
65
|
{
|
|
@@ -70,14 +70,14 @@ function jt({
|
|
|
70
70
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), /* @__PURE__ */ e.createElement("polyline", { points: "7 10 12 15 17 10" }), /* @__PURE__ */ e.createElement("line", { x1: "12", y1: "15", x2: "12", y2: "3" }))
|
|
71
71
|
)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-card__arrow" }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "9 18 15 12 9 6" }))));
|
|
72
72
|
}
|
|
73
|
-
function
|
|
73
|
+
function Jt(t) {
|
|
74
74
|
if (!t) return null;
|
|
75
75
|
const a = t.trim();
|
|
76
76
|
if (a.startsWith("#")) {
|
|
77
77
|
let i = a.slice(1);
|
|
78
|
-
if (i.length === 3 && (i = i.split("").map((
|
|
79
|
-
const
|
|
80
|
-
if (!isNaN(
|
|
78
|
+
if (i.length === 3 && (i = i.split("").map((m) => m + m).join("")), i.length === 6) {
|
|
79
|
+
const m = parseInt(i.slice(0, 2), 16), u = parseInt(i.slice(2, 4), 16), r = parseInt(i.slice(4, 6), 16);
|
|
80
|
+
if (!isNaN(m) && !isNaN(u) && !isNaN(r)) return `${m}, ${u}, ${r}`;
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
const l = a.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
|
|
@@ -85,56 +85,56 @@ function Ot(t) {
|
|
|
85
85
|
const n = a.split(/[\s,]+/).map(Number).filter((i) => !isNaN(i));
|
|
86
86
|
return n.length >= 3 ? `${n[0]}, ${n[1]}, ${n[2]}` : null;
|
|
87
87
|
}
|
|
88
|
-
function
|
|
88
|
+
function Et(t) {
|
|
89
89
|
return t ? t.map((a) => typeof a == "string" ? { label: a, value: a } : a) : [];
|
|
90
90
|
}
|
|
91
|
-
function
|
|
91
|
+
function Xt(t) {
|
|
92
92
|
return ["text", "email", "password", "tel", "url", "number", "date", "time", "datetime-local"].includes(t);
|
|
93
93
|
}
|
|
94
|
-
function
|
|
94
|
+
function Zt({
|
|
95
95
|
artifact: t,
|
|
96
96
|
onSubmit: a,
|
|
97
97
|
onCancel: l,
|
|
98
98
|
onReset: n,
|
|
99
99
|
onButtonClick: i,
|
|
100
|
-
className:
|
|
101
|
-
theme:
|
|
100
|
+
className: m = "",
|
|
101
|
+
theme: u = "dark",
|
|
102
102
|
accent: r = null,
|
|
103
103
|
initialState: x = "active"
|
|
104
104
|
// 'active' | 'submitted' | 'cancelled' | 'inactive'
|
|
105
105
|
}) {
|
|
106
|
-
var
|
|
107
|
-
const o = B(null), [
|
|
106
|
+
var ne, Q, Ee;
|
|
107
|
+
const o = B(null), [k, M] = w(x), T = k !== "active", $ = k === "active" ? "" : `artifactuse-form--${k}`, h = C(() => {
|
|
108
108
|
try {
|
|
109
109
|
return JSON.parse(t.code);
|
|
110
110
|
} catch {
|
|
111
111
|
return { title: "Invalid Form", variant: "fields", data: { fields: [] } };
|
|
112
112
|
}
|
|
113
|
-
}, [t.code]), c = t.id || h.id || `form-${Date.now()}`, E = ((
|
|
114
|
-
var
|
|
113
|
+
}, [t.code]), c = t.id || h.id || `form-${Date.now()}`, E = ((ne = h.data) == null ? void 0 : ne.fields) || [], g = h.title || "Form", D = C(() => E.some((d) => d.type === "buttons"), [E]), J = C(() => h.variant === "buttons" ? E : [], [h.variant, E]), [S, q] = w(() => {
|
|
114
|
+
var L;
|
|
115
115
|
const d = {};
|
|
116
116
|
return E.forEach((y) => {
|
|
117
117
|
["buttons", "divider", "heading"].includes(y.type) || (y.defaultValue !== void 0 ? d[y.name] = y.defaultValue : y.type === "checkbox" ? d[y.name] = !1 : d[y.name] = "");
|
|
118
|
-
}), (
|
|
119
|
-
}), [U, R] =
|
|
118
|
+
}), (L = h.data) != null && L.defaults && Object.assign(d, h.data.defaults), d;
|
|
119
|
+
}), [U, R] = w({}), [ae, A] = w(!1);
|
|
120
120
|
z(() => {
|
|
121
|
-
|
|
121
|
+
M(x);
|
|
122
122
|
}, [x]), z(() => {
|
|
123
|
-
var
|
|
123
|
+
var L;
|
|
124
124
|
const d = {};
|
|
125
125
|
E.forEach((y) => {
|
|
126
126
|
["buttons", "divider", "heading"].includes(y.type) || (y.defaultValue !== void 0 ? d[y.name] = y.defaultValue : y.type === "checkbox" ? d[y.name] = !1 : d[y.name] = "");
|
|
127
|
-
}), (
|
|
127
|
+
}), (L = h.data) != null && L.defaults && Object.assign(d, h.data.defaults), q(d), R({});
|
|
128
128
|
}, [t.code]), z(() => {
|
|
129
|
-
if (o.current && (o.current.setAttribute("data-artifactuse-theme",
|
|
130
|
-
const d =
|
|
129
|
+
if (o.current && (o.current.setAttribute("data-artifactuse-theme", u), r)) {
|
|
130
|
+
const d = Jt(r);
|
|
131
131
|
d && o.current.style.setProperty("--artifactuse-primary", d);
|
|
132
132
|
}
|
|
133
|
-
}, [
|
|
133
|
+
}, [u, r]);
|
|
134
134
|
const j = p((d) => {
|
|
135
|
-
|
|
136
|
-
}, []),
|
|
137
|
-
q((y) => ({ ...y, [d]:
|
|
135
|
+
M(d);
|
|
136
|
+
}, []), me = p((d, L) => {
|
|
137
|
+
q((y) => ({ ...y, [d]: L })), R((y) => {
|
|
138
138
|
const v = { ...y };
|
|
139
139
|
return delete v[d], v;
|
|
140
140
|
});
|
|
@@ -143,41 +143,41 @@ function Xt({
|
|
|
143
143
|
const d = {};
|
|
144
144
|
E.forEach((v) => {
|
|
145
145
|
if (["buttons", "divider", "heading"].includes(v.type)) return;
|
|
146
|
-
const
|
|
147
|
-
if (v.required && !
|
|
146
|
+
const P = S[v.name];
|
|
147
|
+
if (v.required && !P && P !== 0 && P !== !1) {
|
|
148
148
|
d[v.name] = `${v.label || "This field"} is required`;
|
|
149
149
|
return;
|
|
150
150
|
}
|
|
151
|
-
if (v.pattern &&
|
|
151
|
+
if (v.pattern && P && !new RegExp(v.pattern).test(P)) {
|
|
152
152
|
d[v.name] = v.patternMessage || `${v.label || "This field"} is invalid`;
|
|
153
153
|
return;
|
|
154
154
|
}
|
|
155
|
-
if (v.type === "email" &&
|
|
155
|
+
if (v.type === "email" && P && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(P)) {
|
|
156
156
|
d[v.name] = "Please enter a valid email address";
|
|
157
157
|
return;
|
|
158
158
|
}
|
|
159
|
-
if (v.minLength &&
|
|
159
|
+
if (v.minLength && P && P.length < v.minLength) {
|
|
160
160
|
d[v.name] = `Minimum ${v.minLength} characters required`;
|
|
161
161
|
return;
|
|
162
162
|
}
|
|
163
|
-
if (v.maxLength &&
|
|
163
|
+
if (v.maxLength && P && P.length > v.maxLength) {
|
|
164
164
|
d[v.name] = `Maximum ${v.maxLength} characters allowed`;
|
|
165
165
|
return;
|
|
166
166
|
}
|
|
167
167
|
});
|
|
168
|
-
const
|
|
169
|
-
return
|
|
168
|
+
const L = (y = h.data) == null ? void 0 : y.validation;
|
|
169
|
+
return L && Object.entries(L).forEach(([v, P]) => {
|
|
170
170
|
if (d[v]) return;
|
|
171
171
|
const G = S[v];
|
|
172
|
-
|
|
172
|
+
P.pattern && G && (new RegExp(P.pattern).test(G) || (d[v] = P.message || `${v} is invalid`));
|
|
173
173
|
}), R(d), Object.keys(d).length === 0;
|
|
174
|
-
}, [E, S, (Q = h.data) == null ? void 0 : Q.validation]),
|
|
175
|
-
var
|
|
174
|
+
}, [E, S, (Q = h.data) == null ? void 0 : Q.validation]), de = p(() => {
|
|
175
|
+
var L;
|
|
176
176
|
const d = {};
|
|
177
177
|
E.forEach((y) => {
|
|
178
178
|
["buttons", "divider", "heading"].includes(y.type) || (y.defaultValue !== void 0 ? d[y.name] = y.defaultValue : y.type === "checkbox" ? d[y.name] = !1 : d[y.name] = "");
|
|
179
|
-
}), (
|
|
180
|
-
}, [E, (
|
|
179
|
+
}), (L = h.data) != null && L.defaults && Object.assign(d, h.data.defaults), q(d), R({});
|
|
180
|
+
}, [E, (Ee = h.data) == null ? void 0 : Ee.defaults]), fe = p((d) => {
|
|
181
181
|
d == null || d.preventDefault(), re() && (A(!0), a == null || a({
|
|
182
182
|
formId: c,
|
|
183
183
|
action: "submit",
|
|
@@ -186,11 +186,11 @@ function Xt({
|
|
|
186
186
|
}), setTimeout(() => {
|
|
187
187
|
A(!1), j("submitted");
|
|
188
188
|
}, 300));
|
|
189
|
-
}, [c, S, a, re, j]),
|
|
190
|
-
const
|
|
191
|
-
switch (
|
|
189
|
+
}, [c, S, a, re, j]), pe = p((d) => {
|
|
190
|
+
const L = d.action || "custom";
|
|
191
|
+
switch (L) {
|
|
192
192
|
case "submit":
|
|
193
|
-
|
|
193
|
+
fe();
|
|
194
194
|
break;
|
|
195
195
|
case "cancel":
|
|
196
196
|
l == null || l({
|
|
@@ -203,7 +203,7 @@ function Xt({
|
|
|
203
203
|
}, 150);
|
|
204
204
|
break;
|
|
205
205
|
case "reset":
|
|
206
|
-
|
|
206
|
+
de(), n == null || n({
|
|
207
207
|
formId: c,
|
|
208
208
|
action: "reset",
|
|
209
209
|
buttonName: d.name || "reset",
|
|
@@ -214,7 +214,7 @@ function Xt({
|
|
|
214
214
|
default:
|
|
215
215
|
i == null || i({
|
|
216
216
|
formId: c,
|
|
217
|
-
action:
|
|
217
|
+
action: L,
|
|
218
218
|
buttonName: d.name || d.label,
|
|
219
219
|
buttonLabel: d.label,
|
|
220
220
|
values: { ...S },
|
|
@@ -224,30 +224,30 @@ function Xt({
|
|
|
224
224
|
}, 150);
|
|
225
225
|
break;
|
|
226
226
|
}
|
|
227
|
-
}, [c, S,
|
|
228
|
-
return
|
|
227
|
+
}, [c, S, fe, l, n, i, de, j]);
|
|
228
|
+
return T ? /* @__PURE__ */ e.createElement(
|
|
229
229
|
"div",
|
|
230
230
|
{
|
|
231
231
|
ref: o,
|
|
232
|
-
className: `artifactuse-inline-form artifactuse-form-${h.variant || "fields"} ${$} ${
|
|
233
|
-
"data-artifactuse-theme":
|
|
232
|
+
className: `artifactuse-inline-form artifactuse-form-${h.variant || "fields"} ${$} ${m}`,
|
|
233
|
+
"data-artifactuse-theme": u
|
|
234
234
|
},
|
|
235
|
-
/* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-collapsed" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-collapsed-icon" },
|
|
235
|
+
/* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-collapsed" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-collapsed-icon" }, k === "submitted" && /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ e.createElement("polyline", { points: "20 6 9 17 4 12" })), k === "cancelled" && /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ e.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ e.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })), k === "inactive" && /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ e.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-form-collapsed-title" }, g))
|
|
236
236
|
) : h.variant === "buttons" ? /* @__PURE__ */ e.createElement(
|
|
237
237
|
"div",
|
|
238
238
|
{
|
|
239
239
|
ref: o,
|
|
240
|
-
className: `artifactuse-inline-form artifactuse-form-buttons ${
|
|
241
|
-
"data-artifactuse-theme":
|
|
240
|
+
className: `artifactuse-inline-form artifactuse-form-buttons ${m}`,
|
|
241
|
+
"data-artifactuse-theme": u
|
|
242
242
|
},
|
|
243
243
|
(h.title || h.description) && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-header" }, h.title && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-title" }, h.title), h.description && /* @__PURE__ */ e.createElement("p", { className: "artifactuse-form-description" }, h.description)),
|
|
244
|
-
/* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-buttons" }, J.map((d,
|
|
244
|
+
/* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-buttons" }, J.map((d, L) => /* @__PURE__ */ e.createElement(
|
|
245
245
|
"button",
|
|
246
246
|
{
|
|
247
|
-
key: d.name || d.label ||
|
|
247
|
+
key: d.name || d.label || L,
|
|
248
248
|
type: "button",
|
|
249
249
|
className: `artifactuse-form-btn artifactuse-form-btn-${d.variant || "secondary"}`,
|
|
250
|
-
onClick: () =>
|
|
250
|
+
onClick: () => pe(d),
|
|
251
251
|
disabled: d.disabled || ae
|
|
252
252
|
},
|
|
253
253
|
d.icon && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-form-btn-icon", dangerouslySetInnerHTML: { __html: d.icon } }),
|
|
@@ -257,28 +257,28 @@ function Xt({
|
|
|
257
257
|
"div",
|
|
258
258
|
{
|
|
259
259
|
ref: o,
|
|
260
|
-
className: `artifactuse-inline-form artifactuse-form-fields ${
|
|
261
|
-
"data-artifactuse-theme":
|
|
260
|
+
className: `artifactuse-inline-form artifactuse-form-fields ${m}`,
|
|
261
|
+
"data-artifactuse-theme": u
|
|
262
262
|
},
|
|
263
263
|
(h.title || h.description) && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-header" }, h.title && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-title" }, h.title), h.description && /* @__PURE__ */ e.createElement("p", { className: "artifactuse-form-description" }, h.description)),
|
|
264
|
-
/* @__PURE__ */ e.createElement("form", { onSubmit:
|
|
265
|
-
|
|
264
|
+
/* @__PURE__ */ e.createElement("form", { onSubmit: fe, className: "artifactuse-form" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-fields" }, E.map((d, L) => /* @__PURE__ */ e.createElement(
|
|
265
|
+
Kt,
|
|
266
266
|
{
|
|
267
|
-
key: d.name ||
|
|
267
|
+
key: d.name || L,
|
|
268
268
|
field: d,
|
|
269
269
|
formId: c,
|
|
270
270
|
value: S[d.name],
|
|
271
271
|
error: U[d.name],
|
|
272
272
|
isSubmitting: ae,
|
|
273
|
-
onChange: (y) =>
|
|
274
|
-
onButtonAction:
|
|
273
|
+
onChange: (y) => me(d.name, y),
|
|
274
|
+
onButtonAction: pe
|
|
275
275
|
}
|
|
276
276
|
))), !D && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-buttons artifactuse-form-buttons-default" }, /* @__PURE__ */ e.createElement(
|
|
277
277
|
"button",
|
|
278
278
|
{
|
|
279
279
|
type: "button",
|
|
280
280
|
className: "artifactuse-form-btn artifactuse-form-btn-ghost",
|
|
281
|
-
onClick: () =>
|
|
281
|
+
onClick: () => pe({ action: "cancel", label: "Cancel" })
|
|
282
282
|
},
|
|
283
283
|
"Cancel"
|
|
284
284
|
), /* @__PURE__ */ e.createElement(
|
|
@@ -293,16 +293,16 @@ function Xt({
|
|
|
293
293
|
)))
|
|
294
294
|
);
|
|
295
295
|
}
|
|
296
|
-
function
|
|
296
|
+
function Kt({ field: t, formId: a, value: l, error: n, isSubmitting: i, onChange: m, onButtonAction: u }) {
|
|
297
297
|
const r = `${a}-${t.name}`;
|
|
298
298
|
if (t.type === "buttons")
|
|
299
|
-
return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-buttons" }, (t.fields || []).map((o,
|
|
299
|
+
return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-buttons" }, (t.fields || []).map((o, k) => /* @__PURE__ */ e.createElement(
|
|
300
300
|
"button",
|
|
301
301
|
{
|
|
302
|
-
key: o.name || o.label ||
|
|
302
|
+
key: o.name || o.label || k,
|
|
303
303
|
type: o.action === "submit" ? "submit" : "button",
|
|
304
304
|
className: `artifactuse-form-btn artifactuse-form-btn-${o.variant || "secondary"}`,
|
|
305
|
-
onClick: o.action !== "submit" ? () =>
|
|
305
|
+
onClick: o.action !== "submit" ? () => u(o) : void 0,
|
|
306
306
|
disabled: o.disabled || o.action === "submit" && i
|
|
307
307
|
},
|
|
308
308
|
i && o.action === "submit" ? /* @__PURE__ */ e.createElement("span", { className: "artifactuse-form-btn-spinner" }) : o.icon ? /* @__PURE__ */ e.createElement("span", { className: "artifactuse-form-btn-icon", dangerouslySetInnerHTML: { __html: o.icon } }) : null,
|
|
@@ -322,11 +322,11 @@ function Zt({ field: t, formId: a, value: l, error: n, isSubmitting: i, onChange
|
|
|
322
322
|
checked: l || !1,
|
|
323
323
|
disabled: t.disabled,
|
|
324
324
|
className: "artifactuse-checkbox",
|
|
325
|
-
onChange: (o) =>
|
|
325
|
+
onChange: (o) => m(o.target.checked)
|
|
326
326
|
}
|
|
327
327
|
), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-checkbox-text" }, t.label, t.required && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-required" }, "*"))), t.helpText && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-help-text" }, t.helpText), n && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-error-text" }, n));
|
|
328
328
|
if (t.type === "radio")
|
|
329
|
-
return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-field" }, t.label && /* @__PURE__ */ e.createElement("label", { className: "artifactuse-label" }, t.label, t.required && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-required" }, "*")), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-radio-group" },
|
|
329
|
+
return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-field" }, t.label && /* @__PURE__ */ e.createElement("label", { className: "artifactuse-label" }, t.label, t.required && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-required" }, "*")), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-radio-group" }, Et(t.options).map((o) => /* @__PURE__ */ e.createElement("label", { key: o.value, className: "artifactuse-radio-label" }, /* @__PURE__ */ e.createElement(
|
|
330
330
|
"input",
|
|
331
331
|
{
|
|
332
332
|
type: "radio",
|
|
@@ -335,10 +335,10 @@ function Zt({ field: t, formId: a, value: l, error: n, isSubmitting: i, onChange
|
|
|
335
335
|
checked: l === o.value,
|
|
336
336
|
disabled: o.disabled || t.disabled,
|
|
337
337
|
className: "artifactuse-radio",
|
|
338
|
-
onChange: () =>
|
|
338
|
+
onChange: () => m(o.value)
|
|
339
339
|
}
|
|
340
340
|
), /* @__PURE__ */ e.createElement("span", null, o.label)))), t.helpText && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-help-text" }, t.helpText), n && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-error-text" }, n));
|
|
341
|
-
const x = () =>
|
|
341
|
+
const x = () => Xt(t.type) ? /* @__PURE__ */ e.createElement(
|
|
342
342
|
"input",
|
|
343
343
|
{
|
|
344
344
|
type: t.type,
|
|
@@ -349,7 +349,7 @@ function Zt({ field: t, formId: a, value: l, error: n, isSubmitting: i, onChange
|
|
|
349
349
|
disabled: t.disabled,
|
|
350
350
|
required: t.required,
|
|
351
351
|
className: "artifactuse-input",
|
|
352
|
-
onChange: (o) =>
|
|
352
|
+
onChange: (o) => m(t.type === "number" ? Number(o.target.value) : o.target.value)
|
|
353
353
|
}
|
|
354
354
|
) : t.type === "textarea" ? /* @__PURE__ */ e.createElement(
|
|
355
355
|
"textarea",
|
|
@@ -362,7 +362,7 @@ function Zt({ field: t, formId: a, value: l, error: n, isSubmitting: i, onChange
|
|
|
362
362
|
required: t.required,
|
|
363
363
|
rows: t.rows || 3,
|
|
364
364
|
className: "artifactuse-textarea",
|
|
365
|
-
onChange: (o) =>
|
|
365
|
+
onChange: (o) => m(o.target.value)
|
|
366
366
|
}
|
|
367
367
|
) : t.type === "select" ? /* @__PURE__ */ e.createElement(
|
|
368
368
|
"select",
|
|
@@ -373,10 +373,10 @@ function Zt({ field: t, formId: a, value: l, error: n, isSubmitting: i, onChange
|
|
|
373
373
|
disabled: t.disabled,
|
|
374
374
|
required: t.required,
|
|
375
375
|
className: "artifactuse-select",
|
|
376
|
-
onChange: (o) =>
|
|
376
|
+
onChange: (o) => m(o.target.value)
|
|
377
377
|
},
|
|
378
378
|
/* @__PURE__ */ e.createElement("option", { value: "" }, t.placeholder || "Select..."),
|
|
379
|
-
|
|
379
|
+
Et(t.options).map((o) => /* @__PURE__ */ e.createElement("option", { key: o.value, value: o.value, disabled: o.disabled }, o.label))
|
|
380
380
|
) : /* @__PURE__ */ e.createElement(
|
|
381
381
|
"input",
|
|
382
382
|
{
|
|
@@ -386,12 +386,12 @@ function Zt({ field: t, formId: a, value: l, error: n, isSubmitting: i, onChange
|
|
|
386
386
|
value: l || "",
|
|
387
387
|
disabled: t.disabled,
|
|
388
388
|
className: "artifactuse-input",
|
|
389
|
-
onChange: (o) =>
|
|
389
|
+
onChange: (o) => m(o.target.value)
|
|
390
390
|
}
|
|
391
391
|
);
|
|
392
392
|
return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-field" }, /* @__PURE__ */ e.createElement("label", { htmlFor: r, className: "artifactuse-label" }, t.label, t.required && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-required" }, "*")), x(), t.helpText && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-help-text" }, t.helpText), n && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-error-text" }, n));
|
|
393
393
|
}
|
|
394
|
-
const O = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888"><circle cx="12" cy="8" r="4"/><path d="M12 14c-6 0-8 3-8 6v2h16v-2c0-3-2-6-8-6z"/></svg>',
|
|
394
|
+
const O = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888"><circle cx="12" cy="8" r="4"/><path d="M12 14c-6 0-8 3-8 6v2h16v-2c0-3-2-6-8-6z"/></svg>', Yt = {
|
|
395
395
|
twitter: 280,
|
|
396
396
|
linkedin: 3e3,
|
|
397
397
|
instagram: 2200,
|
|
@@ -399,7 +399,7 @@ const O = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0
|
|
|
399
399
|
threads: 500,
|
|
400
400
|
tiktok: 2200,
|
|
401
401
|
youtube: 100
|
|
402
|
-
},
|
|
402
|
+
}, Qt = {
|
|
403
403
|
twitter: "X",
|
|
404
404
|
linkedin: "LinkedIn",
|
|
405
405
|
instagram: "Instagram",
|
|
@@ -413,111 +413,111 @@ const O = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0
|
|
|
413
413
|
} catch {
|
|
414
414
|
return t;
|
|
415
415
|
}
|
|
416
|
-
},
|
|
416
|
+
}, Te = (t) => {
|
|
417
417
|
if (!t) return "";
|
|
418
418
|
let a = t.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
|
419
419
|
return a = a.replace(/\n/g, "<br>"), a = a.replace(/#(\w+)/g, '<span class="artifactuse-social-hashtag">#$1</span>'), a = a.replace(/@(\w+)/g, '<span class="artifactuse-social-mention">@$1</span>'), a;
|
|
420
|
-
},
|
|
421
|
-
var
|
|
422
|
-
const i = a.media || [],
|
|
423
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || O, alt: t.name, className: "artifactuse-social-avatar", onError: (o) => o.target.src = O }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, /* @__PURE__ */ e.createElement("span", null, t.name), t.verified && /* @__PURE__ */ e.createElement(je, { type: t.verifiedType || "blue" })), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-meta" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-author-handle" }, t.handle), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-timestamp" }, "· ", n.timestamp || "Just now")))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html:
|
|
424
|
-
var
|
|
425
|
-
return /* @__PURE__ */ e.createElement("div", { key:
|
|
426
|
-
}), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll-meta" }, F(a.poll.totalVotes || 0), " votes · ", a.poll.duration || "Poll ended")), a.quote && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-quote" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-quote-header" }, /* @__PURE__ */ e.createElement("img", { src: ((
|
|
427
|
-
}, Qt = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
428
|
-
const i = l.likes || l.comments || l.shares || l.reposts;
|
|
429
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || O, alt: t.name, className: "artifactuse-social-avatar", onError: (u) => u.target.src = O }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-info" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.connection && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-author-connection" }, "· ", t.connection)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-headline" }, t.headline), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-timestamp" }, n.timestamp || "Just now", " · 🌐"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: Me(a.text) } }), a.link && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-card" }, a.link.image && /* @__PURE__ */ e.createElement("img", { src: a.link.image, alt: a.link.title, className: "artifactuse-social-link-image", onError: (u) => u.target.style.display = "none" }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-info" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-title" }, a.link.title), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-domain" }, a.link.domain || st(a.link.url))))), i && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, F(l.likes || 0), " reactions"), /* @__PURE__ */ e.createElement("span", null, F(l.comments || 0), " comments"), /* @__PURE__ */ e.createElement("span", null, F(l.shares || l.reposts || 0), " reposts")));
|
|
420
|
+
}, vt = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
421
|
+
var u, r, x;
|
|
422
|
+
const i = a.media || [], m = l.likes || l.retweets || l.replies || l.views;
|
|
423
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || O, alt: t.name, className: "artifactuse-social-avatar", onError: (o) => o.target.src = O }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, /* @__PURE__ */ e.createElement("span", null, t.name), t.verified && /* @__PURE__ */ e.createElement(je, { type: t.verifiedType || "blue" })), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-meta" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-author-handle" }, t.handle), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-timestamp" }, "· ", n.timestamp || "Just now")))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: Te(a.text) } }), i.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, /* @__PURE__ */ e.createElement("div", { className: `artifactuse-social-media-grid ${i.length === 1 ? "artifactuse-social-media-single" : ""}`, "data-count": i.length }, i.slice(0, 4).map((o, k) => /* @__PURE__ */ e.createElement("img", { key: k, src: o.url, alt: o.alt || "", onError: (M) => M.target.style.display = "none" })))), a.link && !i.length && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-card" }, a.link.image && /* @__PURE__ */ e.createElement("img", { src: a.link.image, alt: a.link.title, className: "artifactuse-social-link-image", onError: (o) => o.target.style.display = "none" }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-info" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-domain" }, a.link.domain || st(a.link.url)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-title" }, a.link.title), a.link.description && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-description" }, a.link.description))), a.poll && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll" }, a.poll.options.map((o, k) => {
|
|
424
|
+
var M, T;
|
|
425
|
+
return /* @__PURE__ */ e.createElement("div", { key: k, className: "artifactuse-social-poll-option" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll-bar", style: { width: `${((M = a.poll.votes) == null ? void 0 : M[k]) || 0}%` } }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll-label" }, /* @__PURE__ */ e.createElement("span", null, o), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-poll-percent" }, ((T = a.poll.votes) == null ? void 0 : T[k]) || 0, "%")));
|
|
426
|
+
}), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll-meta" }, F(a.poll.totalVotes || 0), " votes · ", a.poll.duration || "Poll ended")), a.quote && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-quote" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-quote-header" }, /* @__PURE__ */ e.createElement("img", { src: ((u = a.quote.author) == null ? void 0 : u.avatar) || O, className: "artifactuse-social-quote-avatar", alt: "" }), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-quote-author" }, (r = a.quote.author) == null ? void 0 : r.name), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-quote-handle" }, (x = a.quote.author) == null ? void 0 : x.handle)), /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-quote-text" }, a.quote.text))), m && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, F(l.replies || 0), " replies"), /* @__PURE__ */ e.createElement("span", null, F(l.retweets || 0), " reposts"), /* @__PURE__ */ e.createElement("span", null, F(l.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, F(l.views || 0), " views")));
|
|
430
427
|
}, Gt = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
431
|
-
const i =
|
|
432
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || O, alt: t.name, className: "artifactuse-social-avatar", onError: (
|
|
428
|
+
const i = l.likes || l.comments || l.shares || l.reposts;
|
|
429
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || O, alt: t.name, className: "artifactuse-social-avatar", onError: (m) => m.target.src = O }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-info" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.connection && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-author-connection" }, "· ", t.connection)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-headline" }, t.headline), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-timestamp" }, n.timestamp || "Just now", " · 🌐"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: Te(a.text) } }), a.link && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-card" }, a.link.image && /* @__PURE__ */ e.createElement("img", { src: a.link.image, alt: a.link.title, className: "artifactuse-social-link-image", onError: (m) => m.target.style.display = "none" }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-info" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-title" }, a.link.title), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-domain" }, a.link.domain || st(a.link.url))))), i && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, F(l.likes || 0), " reactions"), /* @__PURE__ */ e.createElement("span", null, F(l.comments || 0), " comments"), /* @__PURE__ */ e.createElement("span", null, F(l.shares || l.reposts || 0), " reposts")));
|
|
433
430
|
}, ea = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
434
|
-
const i = a.media || []
|
|
431
|
+
const i = a.media || [];
|
|
432
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || O, alt: t.name, className: "artifactuse-social-avatar", onError: (m) => m.target.src = O }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.verified && /* @__PURE__ */ e.createElement(je, { type: "blue" })), n.location && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-location" }, n.location))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, i[0] ? /* @__PURE__ */ e.createElement("img", { src: i[0].url, alt: i[0].alt || "", onError: (m) => m.target.style.display = "none" }) : /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media-placeholder" })), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-likes" }, F(l.likes || 0), " likes"), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-caption" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-caption-author" }, t.name), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-caption-text", dangerouslySetInnerHTML: { __html: Te(a.text) } })), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-timestamp" }, n.timestamp || "JUST NOW"));
|
|
433
|
+
}, ta = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
434
|
+
const i = a.media || [], m = C(() => {
|
|
435
435
|
const r = l.reactions || {};
|
|
436
436
|
return Object.values(r).reduce((x, o) => x + (o || 0), 0) || l.likes || 0;
|
|
437
|
-
}, [l]),
|
|
438
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || O, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = O }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-timestamp" }, n.timestamp || "Just now", " · 🌐"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html:
|
|
439
|
-
}, ta = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
440
|
-
const i = l.likes || l.replies || l.reposts;
|
|
441
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || O, alt: t.name, className: "artifactuse-social-avatar", onError: (u) => u.target.src = O }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.verified && /* @__PURE__ */ e.createElement(je, { type: "blue" }))), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-timestamp" }, n.timestamp || "Just now")), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: Me(a.text) } })), i && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, F(l.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, F(l.replies || 0), " replies"), /* @__PURE__ */ e.createElement("span", null, F(l.reposts || 0), " reposts")));
|
|
437
|
+
}, [l]), u = l.likes || l.comments || l.shares || m;
|
|
438
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || O, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = O }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-timestamp" }, n.timestamp || "Just now", " · 🌐"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: Te(a.text) } }), i.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media-grid", "data-count": i.length }, i.slice(0, 4).map((r, x) => /* @__PURE__ */ e.createElement("img", { key: x, src: r.url, alt: r.alt || "", onError: (o) => o.target.style.display = "none" })))), a.link && !i.length && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-card" }, a.link.image && /* @__PURE__ */ e.createElement("img", { src: a.link.image, alt: a.link.title, className: "artifactuse-social-link-image", onError: (r) => r.target.style.display = "none" }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-info" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-domain" }, a.link.domain || st(a.link.url)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-title" }, a.link.title)))), u && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, "👍❤️ ", F(m)), /* @__PURE__ */ e.createElement("span", null, F(l.comments || 0), " comments · ", F(l.shares || 0), " shares")));
|
|
442
439
|
}, aa = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
443
|
-
const i =
|
|
444
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-
|
|
440
|
+
const i = l.likes || l.replies || l.reposts;
|
|
441
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || O, alt: t.name, className: "artifactuse-social-avatar", onError: (m) => m.target.src = O }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.verified && /* @__PURE__ */ e.createElement(je, { type: "blue" }))), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-timestamp" }, n.timestamp || "Just now")), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: Te(a.text) } })), i && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, F(l.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, F(l.replies || 0), " replies"), /* @__PURE__ */ e.createElement("span", null, F(l.reposts || 0), " reposts")));
|
|
445
442
|
}, ra = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
443
|
+
const i = a.media || [], m = l.likes || l.comments || l.shares;
|
|
444
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, i[0] ? /* @__PURE__ */ e.createElement("img", { src: i[0].url, alt: "Video thumbnail", onError: (u) => u.target.style.display = "none" }) : /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail-placeholder" }), a.duration && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-duration" }, a.duration)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-info" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || O, alt: t.name, className: "artifactuse-social-avatar", onError: (u) => u.target.src = O }), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-author-name" }, "@", t.name), t.verified && /* @__PURE__ */ e.createElement(je, { type: "blue" })), /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: Te(a.text) } }), a.sound && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-sound" }, "🎵 ", a.sound)), m && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, F(l.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, F(l.comments || 0), " comments"), /* @__PURE__ */ e.createElement("span", null, F(l.shares || 0), " shares")));
|
|
445
|
+
}, sa = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
446
446
|
const i = a.media || [];
|
|
447
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, i[0] ? /* @__PURE__ */ e.createElement("img", { src: i[0].url, alt: "Video thumbnail", onError: (
|
|
447
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, i[0] ? /* @__PURE__ */ e.createElement("img", { src: i[0].url, alt: "Video thumbnail", onError: (m) => m.target.style.display = "none" }) : /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail-placeholder" }), a.duration && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-duration" }, a.duration)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-info" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || O, alt: t.name, className: "artifactuse-social-avatar", onError: (m) => m.target.src = O }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-details" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-title" }, a.title), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-channel" }, t.name), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-meta" }, F(l.views || 0), " views · ", n.timestamp || "Just now"))));
|
|
448
448
|
};
|
|
449
|
-
function
|
|
450
|
-
const [n, i] =
|
|
449
|
+
function na({ artifact: t, theme: a = "dark", onCopy: l }) {
|
|
450
|
+
const [n, i] = w("Copy"), m = C(() => {
|
|
451
451
|
try {
|
|
452
452
|
return JSON.parse(t.code);
|
|
453
453
|
} catch {
|
|
454
454
|
return { platform: "twitter", data: {} };
|
|
455
455
|
}
|
|
456
|
-
}, [t.code]),
|
|
456
|
+
}, [t.code]), u = (m == null ? void 0 : m.platform) || "twitter", r = (m == null ? void 0 : m.data) || {}, { author: x = {}, content: o = {}, engagement: k = {}, meta: M = {} } = r, T = Yt[u] || 280, $ = (o.text || "").length, h = $ > T ? "error" : $ > T * 0.9 ? "warning" : "", c = p(() => {
|
|
457
457
|
const g = o.text || "";
|
|
458
458
|
navigator.clipboard.writeText(g).then(() => {
|
|
459
|
-
i("Copied!"), setTimeout(() => i("Copy"), 2e3), l == null || l({ platform:
|
|
459
|
+
i("Copied!"), setTimeout(() => i("Copy"), 2e3), l == null || l({ platform: u, text: g });
|
|
460
460
|
});
|
|
461
|
-
}, [o.text,
|
|
462
|
-
const g = { author: x, content: o, engagement:
|
|
463
|
-
switch (
|
|
461
|
+
}, [o.text, u, l]), E = () => {
|
|
462
|
+
const g = { author: x, content: o, engagement: k, meta: M };
|
|
463
|
+
switch (u) {
|
|
464
464
|
case "twitter":
|
|
465
|
-
return /* @__PURE__ */ e.createElement(
|
|
465
|
+
return /* @__PURE__ */ e.createElement(vt, { ...g });
|
|
466
466
|
case "linkedin":
|
|
467
|
-
return /* @__PURE__ */ e.createElement(Qt, { ...g });
|
|
468
|
-
case "instagram":
|
|
469
467
|
return /* @__PURE__ */ e.createElement(Gt, { ...g });
|
|
470
|
-
case "
|
|
468
|
+
case "instagram":
|
|
471
469
|
return /* @__PURE__ */ e.createElement(ea, { ...g });
|
|
472
|
-
case "
|
|
470
|
+
case "facebook":
|
|
473
471
|
return /* @__PURE__ */ e.createElement(ta, { ...g });
|
|
474
|
-
case "
|
|
472
|
+
case "threads":
|
|
475
473
|
return /* @__PURE__ */ e.createElement(aa, { ...g });
|
|
476
|
-
case "
|
|
474
|
+
case "tiktok":
|
|
477
475
|
return /* @__PURE__ */ e.createElement(ra, { ...g });
|
|
476
|
+
case "youtube":
|
|
477
|
+
return /* @__PURE__ */ e.createElement(sa, { ...g });
|
|
478
478
|
default:
|
|
479
|
-
return /* @__PURE__ */ e.createElement(
|
|
479
|
+
return /* @__PURE__ */ e.createElement(vt, { ...g });
|
|
480
480
|
}
|
|
481
481
|
};
|
|
482
|
-
return /* @__PURE__ */ e.createElement("div", { className: `artifactuse-social artifactuse-social-${
|
|
482
|
+
return /* @__PURE__ */ e.createElement("div", { className: `artifactuse-social artifactuse-social-${u}`, "data-artifactuse-theme": a }, E(), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-actions-bar" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-platform-badge" }, /* @__PURE__ */ e.createElement("span", null, Qt[u] || u)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-actions-right" }, /* @__PURE__ */ e.createElement("span", { className: `artifactuse-social-char-counter ${h}` }, $, "/", T), /* @__PURE__ */ e.createElement("button", { className: "artifactuse-social-copy-btn", onClick: c }, n))));
|
|
483
483
|
}
|
|
484
|
-
function
|
|
484
|
+
function la({
|
|
485
485
|
isOpen: t = !1,
|
|
486
486
|
type: a = "image",
|
|
487
487
|
src: l = "",
|
|
488
488
|
alt: n = "",
|
|
489
489
|
caption: i = "",
|
|
490
|
-
onClose:
|
|
491
|
-
className:
|
|
490
|
+
onClose: m,
|
|
491
|
+
className: u = ""
|
|
492
492
|
}) {
|
|
493
|
-
const r = B(null), [x, o] =
|
|
494
|
-
z(() => (
|
|
493
|
+
const r = B(null), [x, o] = w(!1), [k, M] = w(!1);
|
|
494
|
+
z(() => (M(!0), () => M(!1)), []), z(() => {
|
|
495
495
|
var E;
|
|
496
496
|
return t ? (document.body.style.overflow = "hidden", (E = r.current) == null || E.focus()) : (document.body.style.overflow = "", o(!1)), () => {
|
|
497
497
|
document.body.style.overflow = "";
|
|
498
498
|
};
|
|
499
499
|
}, [t]), z(() => {
|
|
500
500
|
function E(g) {
|
|
501
|
-
g.key === "Escape" && t &&
|
|
501
|
+
g.key === "Escape" && t && m && m();
|
|
502
502
|
}
|
|
503
503
|
return document.addEventListener("keydown", E), () => document.removeEventListener("keydown", E);
|
|
504
|
-
}, [t,
|
|
505
|
-
const
|
|
506
|
-
o(!1),
|
|
507
|
-
}, [
|
|
504
|
+
}, [t, m]);
|
|
505
|
+
const T = p(() => {
|
|
506
|
+
o(!1), m && m();
|
|
507
|
+
}, [m]), $ = p(() => {
|
|
508
508
|
a === "image" && o((E) => !E);
|
|
509
509
|
}, [a]), h = p(() => {
|
|
510
510
|
const E = document.createElement("a");
|
|
511
511
|
E.href = l, E.download = n || "download", document.body.appendChild(E), E.click(), document.body.removeChild(E);
|
|
512
512
|
}, [l, n]);
|
|
513
|
-
if (!t || !
|
|
513
|
+
if (!t || !k)
|
|
514
514
|
return null;
|
|
515
515
|
const c = /* @__PURE__ */ e.createElement(
|
|
516
516
|
"div",
|
|
517
517
|
{
|
|
518
518
|
ref: r,
|
|
519
|
-
className: `artifactuse-viewer-overlay ${
|
|
520
|
-
onClick:
|
|
519
|
+
className: `artifactuse-viewer-overlay ${u}`,
|
|
520
|
+
onClick: T,
|
|
521
521
|
tabIndex: -1,
|
|
522
522
|
role: "dialog",
|
|
523
523
|
"aria-modal": "true"
|
|
@@ -541,7 +541,7 @@ function na({
|
|
|
541
541
|
"button",
|
|
542
542
|
{
|
|
543
543
|
className: "artifactuse-viewer-close",
|
|
544
|
-
onClick:
|
|
544
|
+
onClick: T,
|
|
545
545
|
title: "Close (Esc)"
|
|
546
546
|
},
|
|
547
547
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ e.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))
|
|
@@ -563,9 +563,9 @@ function na({
|
|
|
563
563
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), /* @__PURE__ */ e.createElement("polyline", { points: "7 10 12 15 17 10" }), /* @__PURE__ */ e.createElement("line", { x1: "12", y1: "15", x2: "12", y2: "3" }))
|
|
564
564
|
)), i && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-viewer-caption" }, i))
|
|
565
565
|
);
|
|
566
|
-
return
|
|
566
|
+
return jt(c, document.body);
|
|
567
567
|
}
|
|
568
|
-
function
|
|
568
|
+
function ca(t) {
|
|
569
569
|
if (!t) return null;
|
|
570
570
|
try {
|
|
571
571
|
const a = decodeURIComponent(escape(atob(t)));
|
|
@@ -580,7 +580,7 @@ function la(t) {
|
|
|
580
580
|
}
|
|
581
581
|
}
|
|
582
582
|
}
|
|
583
|
-
function
|
|
583
|
+
function ia(t) {
|
|
584
584
|
const a = [];
|
|
585
585
|
if (!t) return a;
|
|
586
586
|
const l = /<div\s+class="artifactuse-placeholder[^"]*"[^>]*data-artifact-id="([^"]+)"[^>]*data-artifact-type="([^"]+)"[^>]*data-artifact=["']([^"']*)["'][^>]*><\/div>/gi;
|
|
@@ -590,33 +590,33 @@ function ca(t) {
|
|
|
590
590
|
const r = t.slice(n, i.index);
|
|
591
591
|
r.trim() && a.push({ type: "html", content: r });
|
|
592
592
|
}
|
|
593
|
-
const
|
|
594
|
-
|
|
593
|
+
const m = ca(i[3]), u = i[2];
|
|
594
|
+
m && (u === "form" && m.isInline ? a.push({ type: "form", artifact: m }) : u === "social" ? a.push({ type: "social", artifact: m }) : a.push({ type: "panel", artifact: m })), n = i.index + i[0].length;
|
|
595
595
|
}
|
|
596
596
|
if (n < t.length) {
|
|
597
|
-
const
|
|
598
|
-
|
|
597
|
+
const m = t.slice(n);
|
|
598
|
+
m.trim() && a.push({ type: "html", content: m });
|
|
599
599
|
}
|
|
600
600
|
return a.length === 0 && t.trim() && a.push({ type: "html", content: t }), a;
|
|
601
601
|
}
|
|
602
|
-
function
|
|
602
|
+
function oa() {
|
|
603
603
|
return `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
|
604
604
|
}
|
|
605
|
-
function
|
|
605
|
+
function ua({
|
|
606
606
|
content: t,
|
|
607
|
-
messageId: a =
|
|
607
|
+
messageId: a = oa(),
|
|
608
608
|
inlineCards: l = !0,
|
|
609
609
|
typing: n = !1,
|
|
610
610
|
isLastMessage: i = !1,
|
|
611
611
|
// Whether this is the last/most recent message
|
|
612
|
-
inlinePreview:
|
|
613
|
-
inlineCode:
|
|
612
|
+
inlinePreview: m = null,
|
|
613
|
+
inlineCode: u = null,
|
|
614
614
|
tabs: r = null,
|
|
615
615
|
viewMode: x = null,
|
|
616
616
|
onArtifactDetected: o,
|
|
617
|
-
onArtifactOpen:
|
|
618
|
-
onArtifactCopy:
|
|
619
|
-
onArtifactDownload:
|
|
617
|
+
onArtifactOpen: k,
|
|
618
|
+
onArtifactCopy: M,
|
|
619
|
+
onArtifactDownload: T,
|
|
620
620
|
onFormSubmit: $,
|
|
621
621
|
onFormCancel: h,
|
|
622
622
|
onFormButtonClick: c,
|
|
@@ -624,26 +624,26 @@ function oa({
|
|
|
624
624
|
onMediaOpen: g,
|
|
625
625
|
className: D = ""
|
|
626
626
|
}) {
|
|
627
|
-
var
|
|
627
|
+
var Ce;
|
|
628
628
|
const {
|
|
629
629
|
processMessage: J,
|
|
630
630
|
openArtifact: S,
|
|
631
631
|
state: q,
|
|
632
632
|
getTheme: U,
|
|
633
633
|
instance: R
|
|
634
|
-
} =
|
|
634
|
+
} = Me(), ae = B(null), A = B(null), j = B(null), me = B(n), [re, de] = w(""), [fe, pe] = w([]), [ne, Q] = w(!1), [Ee, d] = w(!1), [L, y] = w("image"), [v, P] = w(""), [G, be] = w(""), [Ne, $e] = w(""), Z = C(() => typeof U == "function" ? U() : "dark", [U]), He = (q == null ? void 0 : q.activeArtifactId) || null, Pe = l ?? ((Ce = R == null ? void 0 : R.config) == null ? void 0 : Ce.inlineCards) ?? !0, we = C(() => ia(re), [re]), ke = C(() => ne || i ? "active" : "inactive", [ne, i]);
|
|
635
635
|
z(() => {
|
|
636
636
|
n && Q(!0);
|
|
637
637
|
}, [n]);
|
|
638
|
-
const
|
|
639
|
-
y(_.type || "image"),
|
|
638
|
+
const le = p((_) => {
|
|
639
|
+
y(_.type || "image"), P(_.src || ""), be(_.alt || ""), $e(_.caption || ""), d(!0), g && g(_);
|
|
640
640
|
}, [g]), Ie = p(() => {
|
|
641
|
-
d(!1),
|
|
641
|
+
d(!1), P(""), be(""), $e("");
|
|
642
642
|
}, []), Be = p(() => {
|
|
643
643
|
if (!A.current) return;
|
|
644
644
|
A.current.querySelectorAll('img[data-lightbox="true"]').forEach((f) => {
|
|
645
645
|
f._lightboxHandler && f.removeEventListener("click", f._lightboxHandler), f._lightboxHandler = (W) => {
|
|
646
|
-
W.preventDefault(), W.stopPropagation(),
|
|
646
|
+
W.preventDefault(), W.stopPropagation(), le({
|
|
647
647
|
type: "image",
|
|
648
648
|
src: f.src,
|
|
649
649
|
alt: f.alt || "",
|
|
@@ -653,28 +653,28 @@ function oa({
|
|
|
653
653
|
}), A.current.querySelectorAll(".artifactuse-image-container img").forEach((f) => {
|
|
654
654
|
f._lightboxHandler || (f._lightboxHandler = (W) => {
|
|
655
655
|
W.preventDefault(), W.stopPropagation();
|
|
656
|
-
const V = f.closest(".artifactuse-image-container"), K = V == null ? void 0 : V.querySelector(".artifactuse-image-caption"),
|
|
657
|
-
|
|
656
|
+
const V = f.closest(".artifactuse-image-container"), K = V == null ? void 0 : V.querySelector(".artifactuse-image-caption"), ue = (K == null ? void 0 : K.textContent) || f.dataset.caption || f.alt || "";
|
|
657
|
+
le({
|
|
658
658
|
type: "image",
|
|
659
659
|
src: f.src,
|
|
660
660
|
alt: f.alt || "",
|
|
661
|
-
caption:
|
|
661
|
+
caption: ue
|
|
662
662
|
});
|
|
663
663
|
}, f.addEventListener("click", f._lightboxHandler), f.style.cursor = "zoom-in");
|
|
664
664
|
}), A.current.querySelectorAll(".artifactuse-gallery-item img, .artifactuse-image-gallery img").forEach((f) => {
|
|
665
665
|
f._lightboxHandler || (f._lightboxHandler = (W) => {
|
|
666
666
|
W.preventDefault(), W.stopPropagation();
|
|
667
|
-
const V = f.closest(".artifactuse-gallery-item"), K = V == null ? void 0 : V.querySelector(".artifactuse-gallery-caption"),
|
|
668
|
-
|
|
667
|
+
const V = f.closest(".artifactuse-gallery-item"), K = V == null ? void 0 : V.querySelector(".artifactuse-gallery-caption"), ue = (K == null ? void 0 : K.textContent) || f.dataset.caption || f.alt || "";
|
|
668
|
+
le({
|
|
669
669
|
type: "image",
|
|
670
670
|
src: f.src,
|
|
671
671
|
alt: f.alt || "",
|
|
672
|
-
caption:
|
|
672
|
+
caption: ue
|
|
673
673
|
});
|
|
674
674
|
}, f.addEventListener("click", f._lightboxHandler), f.style.cursor = "zoom-in");
|
|
675
675
|
}), A.current.querySelectorAll('a[href$=".pdf"], a[data-type="pdf"]').forEach((f) => {
|
|
676
676
|
f._pdfHandler && f.removeEventListener("click", f._pdfHandler), f._pdfHandler = (W) => {
|
|
677
|
-
W.preventDefault(), W.stopPropagation(),
|
|
677
|
+
W.preventDefault(), W.stopPropagation(), le({
|
|
678
678
|
type: "pdf",
|
|
679
679
|
src: f.href,
|
|
680
680
|
alt: f.textContent || "PDF Document",
|
|
@@ -686,7 +686,7 @@ function oa({
|
|
|
686
686
|
f._pdfHandler && f.removeEventListener("click", f._pdfHandler);
|
|
687
687
|
const W = f.dataset.pdfSrc || ((V = f.querySelector("iframe")) == null ? void 0 : V.src) || "";
|
|
688
688
|
W && (f._pdfHandler = (K) => {
|
|
689
|
-
K.preventDefault(), K.stopPropagation(),
|
|
689
|
+
K.preventDefault(), K.stopPropagation(), le({
|
|
690
690
|
type: "pdf",
|
|
691
691
|
src: W,
|
|
692
692
|
alt: "PDF Document",
|
|
@@ -700,7 +700,7 @@ function oa({
|
|
|
700
700
|
V && window.open(V, "_blank", "noopener,noreferrer");
|
|
701
701
|
}, f.addEventListener("click", f._clickHandler);
|
|
702
702
|
});
|
|
703
|
-
}, [
|
|
703
|
+
}, [le]), Se = p(() => {
|
|
704
704
|
if (!A.current) return;
|
|
705
705
|
A.current.querySelectorAll("img").forEach((N) => {
|
|
706
706
|
N._lightboxHandler && (N.removeEventListener("click", N._lightboxHandler), delete N._lightboxHandler);
|
|
@@ -711,7 +711,7 @@ function oa({
|
|
|
711
711
|
}), A.current.querySelectorAll(".artifactuse-video-preview-wrapper, .video-preview-wrapper").forEach((N) => {
|
|
712
712
|
N._clickHandler && (N.removeEventListener("click", N._clickHandler), delete N._clickHandler);
|
|
713
713
|
});
|
|
714
|
-
}, []),
|
|
714
|
+
}, []), ve = p(() => {
|
|
715
715
|
j.current && clearTimeout(j.current), j.current = setTimeout(async () => {
|
|
716
716
|
if (R != null && R.initializeContent && A.current)
|
|
717
717
|
try {
|
|
@@ -725,68 +725,68 @@ function oa({
|
|
|
725
725
|
z(() => {
|
|
726
726
|
if (t) {
|
|
727
727
|
const _ = J(t, a, {
|
|
728
|
-
inlinePreview:
|
|
729
|
-
inlineCode:
|
|
728
|
+
inlinePreview: m,
|
|
729
|
+
inlineCode: u,
|
|
730
730
|
tabs: r,
|
|
731
731
|
viewMode: x
|
|
732
732
|
});
|
|
733
|
-
|
|
733
|
+
de(_.html), pe(_.artifacts), _.artifacts.length > 0 && o && o(_.artifacts), n || ve();
|
|
734
734
|
}
|
|
735
|
-
}, [t, a, J, n,
|
|
736
|
-
|
|
737
|
-
}, [n,
|
|
735
|
+
}, [t, a, J, n, ve, o]), z(() => {
|
|
736
|
+
me.current === !0 && n === !1 && ve(), me.current = n;
|
|
737
|
+
}, [n, ve]), z(() => (n && Q(!0), n || ve(), () => {
|
|
738
738
|
j.current && clearTimeout(j.current), Se();
|
|
739
739
|
}), []);
|
|
740
740
|
const Fe = p((_) => {
|
|
741
|
-
const
|
|
742
|
-
if (
|
|
743
|
-
if (
|
|
744
|
-
const oe =
|
|
741
|
+
const ce = _.target.closest(".artifactuse-inline-preview");
|
|
742
|
+
if (ce) {
|
|
743
|
+
if (ce.dataset.nonClickable) return;
|
|
744
|
+
const oe = ce.dataset.artifactId;
|
|
745
745
|
if (oe) {
|
|
746
746
|
const ee = q.artifacts.find((N) => N.id === oe);
|
|
747
|
-
ee && (S(ee),
|
|
747
|
+
ee && (S(ee), k && k(ee));
|
|
748
748
|
}
|
|
749
749
|
}
|
|
750
|
-
}, [q, S,
|
|
751
|
-
S(_),
|
|
752
|
-
}, [S,
|
|
753
|
-
|
|
754
|
-
}, [
|
|
755
|
-
|
|
756
|
-
}, [
|
|
750
|
+
}, [q, S, k]), ie = p((_) => {
|
|
751
|
+
S(_), k && k(_);
|
|
752
|
+
}, [S, k]), We = p((_) => {
|
|
753
|
+
M && M(_);
|
|
754
|
+
}, [M]), xe = p((_) => {
|
|
755
|
+
T && T(_);
|
|
756
|
+
}, [T]), Ve = p((_) => {
|
|
757
757
|
$ && $(_);
|
|
758
|
-
}, [$]),
|
|
758
|
+
}, [$]), he = p((_) => {
|
|
759
759
|
h && h(_);
|
|
760
|
-
}, [h]),
|
|
760
|
+
}, [h]), ge = p((_) => {
|
|
761
761
|
c && c(_);
|
|
762
762
|
}, [c]), Oe = p((_) => {
|
|
763
763
|
E && E(_);
|
|
764
|
-
}, [E]),
|
|
764
|
+
}, [E]), _e = (_, ce) => {
|
|
765
765
|
switch (_.type) {
|
|
766
766
|
case "html":
|
|
767
767
|
return /* @__PURE__ */ e.createElement(
|
|
768
768
|
"div",
|
|
769
769
|
{
|
|
770
|
-
key: `html-${
|
|
770
|
+
key: `html-${ce}`,
|
|
771
771
|
dangerouslySetInnerHTML: { __html: _.content }
|
|
772
772
|
}
|
|
773
773
|
);
|
|
774
774
|
case "form":
|
|
775
775
|
return _.artifact.isInline ? /* @__PURE__ */ e.createElement(
|
|
776
|
-
|
|
776
|
+
Zt,
|
|
777
777
|
{
|
|
778
778
|
key: `form-${_.artifact.id}`,
|
|
779
779
|
artifact: _.artifact,
|
|
780
780
|
theme: Z,
|
|
781
781
|
initialState: ke,
|
|
782
782
|
onSubmit: Ve,
|
|
783
|
-
onCancel:
|
|
784
|
-
onButtonClick:
|
|
783
|
+
onCancel: he,
|
|
784
|
+
onButtonClick: ge
|
|
785
785
|
}
|
|
786
786
|
) : null;
|
|
787
787
|
case "social":
|
|
788
788
|
return /* @__PURE__ */ e.createElement(
|
|
789
|
-
|
|
789
|
+
na,
|
|
790
790
|
{
|
|
791
791
|
key: `social-${_.artifact.id}`,
|
|
792
792
|
artifact: _.artifact,
|
|
@@ -795,15 +795,15 @@ function oa({
|
|
|
795
795
|
}
|
|
796
796
|
);
|
|
797
797
|
case "panel":
|
|
798
|
-
return
|
|
799
|
-
|
|
798
|
+
return Pe ? /* @__PURE__ */ e.createElement(
|
|
799
|
+
Ot,
|
|
800
800
|
{
|
|
801
801
|
key: `panel-${_.artifact.id}`,
|
|
802
802
|
artifact: _.artifact,
|
|
803
803
|
isActive: He === _.artifact.id,
|
|
804
804
|
onOpen: ie,
|
|
805
805
|
onCopy: We,
|
|
806
|
-
onDownload:
|
|
806
|
+
onDownload: xe
|
|
807
807
|
}
|
|
808
808
|
) : null;
|
|
809
809
|
default:
|
|
@@ -816,12 +816,12 @@ function oa({
|
|
|
816
816
|
ref: ae,
|
|
817
817
|
className: `artifactuse-agent-message ${D}`.trim()
|
|
818
818
|
},
|
|
819
|
-
/* @__PURE__ */ e.createElement("div", { ref: A, className: "artifactuse-message-content", onClick: Fe },
|
|
819
|
+
/* @__PURE__ */ e.createElement("div", { ref: A, className: "artifactuse-message-content", onClick: Fe }, we.map(_e)),
|
|
820
820
|
/* @__PURE__ */ e.createElement(
|
|
821
|
-
|
|
821
|
+
la,
|
|
822
822
|
{
|
|
823
|
-
isOpen:
|
|
824
|
-
type:
|
|
823
|
+
isOpen: Ee,
|
|
824
|
+
type: L,
|
|
825
825
|
src: v,
|
|
826
826
|
alt: G,
|
|
827
827
|
caption: Ne,
|
|
@@ -830,7 +830,7 @@ function oa({
|
|
|
830
830
|
)
|
|
831
831
|
);
|
|
832
832
|
}
|
|
833
|
-
|
|
833
|
+
ua.propTypes = {
|
|
834
834
|
/** The raw message content (markdown/HTML from AI) */
|
|
835
835
|
content: (t, a) => {
|
|
836
836
|
if (typeof t[a] != "string")
|
|
@@ -877,79 +877,84 @@ oa.propTypes = {
|
|
|
877
877
|
return new Error(`${a} must be a string or null`);
|
|
878
878
|
}
|
|
879
879
|
};
|
|
880
|
-
function
|
|
880
|
+
function ga({
|
|
881
881
|
onAIRequest: t,
|
|
882
882
|
onSave: a,
|
|
883
883
|
onExport: l,
|
|
884
884
|
className: n = "",
|
|
885
885
|
panelWidth: i,
|
|
886
|
-
splitPosition:
|
|
886
|
+
splitPosition: m
|
|
887
887
|
}) {
|
|
888
|
-
var
|
|
888
|
+
var ft;
|
|
889
889
|
const {
|
|
890
|
-
state:
|
|
890
|
+
state: u,
|
|
891
891
|
activeArtifact: r,
|
|
892
892
|
artifactCount: x,
|
|
893
893
|
hasArtifacts: o,
|
|
894
|
-
closePanel:
|
|
895
|
-
toggleFullscreen:
|
|
896
|
-
setViewMode:
|
|
894
|
+
closePanel: k,
|
|
895
|
+
toggleFullscreen: M,
|
|
896
|
+
setViewMode: T,
|
|
897
897
|
getPanelUrl: $,
|
|
898
898
|
openArtifact: h,
|
|
899
899
|
instance: c
|
|
900
|
-
} =
|
|
900
|
+
} = Me(), E = B(null), g = B(null), D = B(null), J = B(null), S = B(null), q = B(null), U = B(null), [R, ae] = w(!1), [A, j] = w(!1), [me, re] = w(!0), [de, fe] = w(!1), [pe, ne] = w(!1), [Q, Ee] = w(!1), [d, L] = w(!1), [y, v] = w("options"), [P, G] = w(""), [be, Ne] = w(null), [$e, Z] = w(""), [He, Pe] = w(!1), [we, ke] = w(!1), [le, Ie] = w([]), [Be, Se] = w(!1), [ve, Fe] = w(""), [ie, We] = w(
|
|
901
901
|
() => {
|
|
902
902
|
var s;
|
|
903
903
|
return Math.min(Math.max(i ?? ((s = c == null ? void 0 : c.config) == null ? void 0 : s.panelWidth) ?? 65, 25), 75);
|
|
904
904
|
}
|
|
905
|
-
), [
|
|
905
|
+
), [xe, Ve] = w(
|
|
906
906
|
() => {
|
|
907
907
|
var s;
|
|
908
|
-
return Math.min(Math.max(
|
|
908
|
+
return Math.min(Math.max(m ?? ((s = c == null ? void 0 : c.config) == null ? void 0 : s.splitPosition) ?? 50, 20), 80);
|
|
909
909
|
}
|
|
910
|
-
),
|
|
910
|
+
), he = B(null), ge = B(null);
|
|
911
911
|
z(() => {
|
|
912
912
|
i !== void 0 && We(Math.min(Math.max(i, 25), 75));
|
|
913
913
|
}, [i]), z(() => {
|
|
914
|
-
|
|
915
|
-
}, [
|
|
916
|
-
const Oe = B(null),
|
|
914
|
+
m !== void 0 && Ve(Math.min(Math.max(m, 20), 80));
|
|
915
|
+
}, [m]);
|
|
916
|
+
const Oe = B(null), _e = B(null), Ce = B(null), _ = C(() => r ? Ue(r.language) : "", [r]), ce = C(() => r ? at(r.language) : "", [r]), oe = C(() => {
|
|
917
917
|
if (!r) return null;
|
|
918
918
|
let s = $(r);
|
|
919
919
|
return s && r._refreshToken && (s += (s.includes("?") ? "&" : "?") + "_t=" + r._refreshToken), s;
|
|
920
|
-
}, [r, $]), ee =
|
|
920
|
+
}, [r, $]), ee = C(() => r ? Rt(r.language) : "plaintext", [r]), N = C(() => u.artifacts.filter((s) => !s.isInline), [u.artifacts]), se = C(() => r ? N.findIndex((s) => s.id === r.id) : -1, [r, N]), f = C(() => {
|
|
921
921
|
var s;
|
|
922
922
|
return ((s = c == null ? void 0 : c.config) == null ? void 0 : s.branding) !== !1;
|
|
923
|
-
}, [c]), W =
|
|
923
|
+
}, [c]), W = C(() => {
|
|
924
924
|
var s;
|
|
925
925
|
return ((s = c == null ? void 0 : c.share) == null ? void 0 : s.enabled) !== !1;
|
|
926
|
-
}, [c]), V =
|
|
926
|
+
}, [c]), V = C(() => {
|
|
927
927
|
var s;
|
|
928
928
|
return ((s = c == null ? void 0 : c.share) == null ? void 0 : s.isAuthenticated()) || !1;
|
|
929
|
-
}, [c]), K =
|
|
930
|
-
|
|
929
|
+
}, [c]), K = C(() => r ? ie : Math.min(ie, 30), [r, ie]), ue = C(() => {
|
|
930
|
+
var s;
|
|
931
|
+
return ((s = c == null ? void 0 : c.config) == null ? void 0 : s.multiTab) === !0;
|
|
932
|
+
}, [c]);
|
|
933
|
+
C(() => ue ? u.openTabs.map((s) => u.artifacts.find((b) => b.id === s)).filter(Boolean) : [], [ue, u.openTabs, u.artifacts]);
|
|
934
|
+
const nt = p((s) => `<svg viewBox="0 0 24 24" fill="currentColor">${at(s)}</svg>`, []), yt = p(() => {
|
|
935
|
+
ne(!1), c.state.clearActiveArtifact();
|
|
931
936
|
}, [c]), ze = p((s) => {
|
|
932
937
|
if (s.language !== "smartdiff") return null;
|
|
933
938
|
try {
|
|
934
939
|
const b = JSON.parse(s.code);
|
|
935
940
|
if (b.oldCode === void 0 || b.newCode === void 0) return null;
|
|
936
|
-
const H = b.language || "plaintext", I =
|
|
941
|
+
const H = b.language || "plaintext", I = pt() && window.Prism.languages[H], X = qt(b.oldCode, b.newCode).split(`
|
|
937
942
|
`);
|
|
938
943
|
return { html: X.map((te) => {
|
|
939
|
-
const Y = te[0], Le = te.slice(1),
|
|
940
|
-
return Y === "-" ? `<span class="token deleted">${
|
|
944
|
+
const Y = te[0], Le = te.slice(1), ye = I ? window.Prism.highlight(Le, I, H) : Le;
|
|
945
|
+
return Y === "-" ? `<span class="token deleted">${ye}</span>` : Y === "+" ? `<span class="token inserted">${ye}</span>` : ye;
|
|
941
946
|
}).join(`
|
|
942
947
|
`), lineCount: X.length };
|
|
943
948
|
} catch {
|
|
944
949
|
return null;
|
|
945
950
|
}
|
|
946
|
-
}, []),
|
|
951
|
+
}, []), lt = p(() => {
|
|
947
952
|
if (!J.current || !(r != null && r.code)) return;
|
|
948
953
|
const s = ze(r), b = s ? s.lineCount : r.code.split(`
|
|
949
954
|
`).length, H = Array.from({ length: b }, (I, X) => `<div>${X + 1}</div>`).join("");
|
|
950
955
|
J.current.innerHTML = H;
|
|
951
|
-
}, [r, ze]),
|
|
952
|
-
if (g.current &&
|
|
956
|
+
}, [r, ze]), ct = p(() => {
|
|
957
|
+
if (g.current && pt() && (r != null && r.code)) {
|
|
953
958
|
const s = ze(r);
|
|
954
959
|
if (s)
|
|
955
960
|
g.current.innerHTML = s.html;
|
|
@@ -962,21 +967,21 @@ function ha({
|
|
|
962
967
|
) : g.current.textContent = r.code;
|
|
963
968
|
}
|
|
964
969
|
g.current.dataset.highlighted = "true", setTimeout(() => {
|
|
965
|
-
|
|
970
|
+
bt();
|
|
966
971
|
}, 0);
|
|
967
972
|
}
|
|
968
|
-
}, [r == null ? void 0 : r.code, ee, ze]),
|
|
973
|
+
}, [r == null ? void 0 : r.code, ee, ze]), bt = p(() => {
|
|
969
974
|
var b;
|
|
970
975
|
const s = (b = g.current) == null ? void 0 : b.closest("pre");
|
|
971
976
|
if (s && S.current && J.current) {
|
|
972
977
|
const I = window.getComputedStyle(s).backgroundColor;
|
|
973
978
|
I && I !== "rgba(0, 0, 0, 0)" && I !== "transparent" && (S.current.style.backgroundColor = I, J.current.style.backgroundColor = I);
|
|
974
979
|
}
|
|
975
|
-
}, []),
|
|
980
|
+
}, []), it = p(() => {
|
|
976
981
|
S.current && (S.current.style.backgroundColor = ""), J.current && (J.current.style.backgroundColor = "");
|
|
977
982
|
}, []), Je = p(() => {
|
|
978
|
-
|
|
979
|
-
}, [
|
|
983
|
+
lt(), ct();
|
|
984
|
+
}, [lt, ct]), Xe = ((ft = c.editor) == null ? void 0 : ft.isAvailable()) || !1, ot = p(() => {
|
|
980
985
|
!Xe || !q.current || !r || (U.current && (U.current.destroy(), U.current = null), U.current = c.editor.create(q.current, {
|
|
981
986
|
code: r.code || "",
|
|
982
987
|
language: r.editorLanguage || r.language || "plaintext",
|
|
@@ -990,53 +995,53 @@ function ha({
|
|
|
990
995
|
artifact: r,
|
|
991
996
|
code: s
|
|
992
997
|
});
|
|
993
|
-
}, [r, c]),
|
|
994
|
-
clearTimeout(
|
|
998
|
+
}, [r, c]), wt = p(() => {
|
|
999
|
+
clearTimeout(_e.current), re(!1), E.current && r && (c.bridge.setIframe(E.current), c.bridge.loadArtifact(r));
|
|
995
1000
|
}, [r, c]), kt = p(() => {
|
|
996
|
-
clearTimeout(
|
|
997
|
-
}, []),
|
|
998
|
-
clearTimeout(
|
|
1001
|
+
clearTimeout(_e.current), re(!1);
|
|
1002
|
+
}, []), xt = p(() => {
|
|
1003
|
+
clearTimeout(_e.current), _e.current = setTimeout(() => {
|
|
999
1004
|
re(!1);
|
|
1000
1005
|
}, 1e3);
|
|
1001
|
-
}, []),
|
|
1006
|
+
}, []), Ct = p(async () => {
|
|
1002
1007
|
if (r)
|
|
1003
1008
|
try {
|
|
1004
1009
|
await navigator.clipboard.writeText(r.code), ae(!0), setTimeout(() => ae(!1), 2e3);
|
|
1005
1010
|
} catch (s) {
|
|
1006
1011
|
console.error("Failed to copy:", s);
|
|
1007
1012
|
}
|
|
1008
|
-
}, [r]),
|
|
1013
|
+
}, [r]), Lt = p(() => {
|
|
1009
1014
|
if (!r) return;
|
|
1010
1015
|
const { code: s, language: b, title: H } = r, I = rt(b), X = `${H.toLowerCase().replace(/\s+/g, "-")}.${I}`, Ae = new Blob([s], { type: "text/plain" }), te = URL.createObjectURL(Ae), Y = document.createElement("a");
|
|
1011
1016
|
Y.href = te, Y.download = X, document.body.appendChild(Y), Y.click(), document.body.removeChild(Y), URL.revokeObjectURL(te);
|
|
1012
|
-
}, [r]),
|
|
1017
|
+
}, [r]), Tt = p(async () => {
|
|
1013
1018
|
if (!(Q || N.length === 0)) {
|
|
1014
|
-
|
|
1019
|
+
Ee(!0);
|
|
1015
1020
|
try {
|
|
1016
|
-
const s = new
|
|
1021
|
+
const s = new Ut(), b = /* @__PURE__ */ new Map();
|
|
1017
1022
|
for (const Y of N) {
|
|
1018
1023
|
if (!Y.code) continue;
|
|
1019
1024
|
const Le = rt(Y.language);
|
|
1020
|
-
let
|
|
1025
|
+
let ye = (Y.title || "untitled").toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-_]/g, ""), et = `${ye}.${Le}`;
|
|
1021
1026
|
const tt = b.get(et) || 0;
|
|
1022
|
-
tt > 0 && (et = `${
|
|
1027
|
+
tt > 0 && (et = `${ye}-${tt}.${Le}`), b.set(`${ye}.${Le}`, tt + 1), s.file(et, Y.code);
|
|
1023
1028
|
}
|
|
1024
1029
|
const H = await s.generateAsync({ type: "blob" }), X = `artifacts-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.zip`, Ae = URL.createObjectURL(H), te = document.createElement("a");
|
|
1025
1030
|
te.href = Ae, te.download = X, document.body.appendChild(te), te.click(), document.body.removeChild(te), URL.revokeObjectURL(Ae);
|
|
1026
1031
|
} catch (s) {
|
|
1027
1032
|
console.error("Failed to create ZIP:", s);
|
|
1028
1033
|
} finally {
|
|
1029
|
-
|
|
1034
|
+
Ee(!1);
|
|
1030
1035
|
}
|
|
1031
1036
|
}
|
|
1032
|
-
}, [Q, N]),
|
|
1037
|
+
}, [Q, N]), ut = p((s) => s ? new Date(s).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : "", []), Mt = p(() => {
|
|
1033
1038
|
if (d) {
|
|
1034
|
-
|
|
1039
|
+
L(!1);
|
|
1035
1040
|
return;
|
|
1036
1041
|
}
|
|
1037
|
-
r && (v("options"), G(""), Ne(null), Z(""),
|
|
1042
|
+
r && (v("options"), G(""), Ne(null), Z(""), Pe(!1), ke(!1), Ie([]), Se(!1), Fe(""), L(!0));
|
|
1038
1043
|
}, [r, c, d]), Pt = p(() => {
|
|
1039
|
-
|
|
1044
|
+
L(!1);
|
|
1040
1045
|
}, []), Ze = p(async () => {
|
|
1041
1046
|
if (!(!r || !(c != null && c.share))) {
|
|
1042
1047
|
v("loading"), Z("");
|
|
@@ -1047,7 +1052,7 @@ function ha({
|
|
|
1047
1052
|
Z(s.message || "Failed to create share link"), v("error");
|
|
1048
1053
|
}
|
|
1049
1054
|
}
|
|
1050
|
-
}, [r, c]),
|
|
1055
|
+
}, [r, c]), mt = p(async () => {
|
|
1051
1056
|
if (V)
|
|
1052
1057
|
Re();
|
|
1053
1058
|
else {
|
|
@@ -1068,9 +1073,9 @@ function ha({
|
|
|
1068
1073
|
Z(s.message || "Failed to save artifact"), v("error");
|
|
1069
1074
|
}
|
|
1070
1075
|
}
|
|
1071
|
-
}, [r, c]),
|
|
1072
|
-
|
|
1073
|
-
}, [
|
|
1076
|
+
}, [r, c]), St = p(() => {
|
|
1077
|
+
we ? Re() : Ze();
|
|
1078
|
+
}, [we, Re, Ze]), At = p(async () => {
|
|
1074
1079
|
if (c != null && c.share) {
|
|
1075
1080
|
if (!V) {
|
|
1076
1081
|
v("loading");
|
|
@@ -1091,7 +1096,7 @@ function ha({
|
|
|
1091
1096
|
Se(!1);
|
|
1092
1097
|
}
|
|
1093
1098
|
}
|
|
1094
|
-
}, [r, c, V]),
|
|
1099
|
+
}, [r, c, V]), $t = p(async (s) => {
|
|
1095
1100
|
var H, I;
|
|
1096
1101
|
if (!r || !(c != null && c.share)) return;
|
|
1097
1102
|
const b = (H = s.project) == null ? void 0 : H.uuid;
|
|
@@ -1104,81 +1109,87 @@ function ha({
|
|
|
1104
1109
|
Z(X.message || "Failed to update artifact"), v("error");
|
|
1105
1110
|
}
|
|
1106
1111
|
}
|
|
1107
|
-
}, [r, c]),
|
|
1108
|
-
if (
|
|
1112
|
+
}, [r, c]), Ht = p(async () => {
|
|
1113
|
+
if (P)
|
|
1109
1114
|
try {
|
|
1110
|
-
await navigator.clipboard.writeText(
|
|
1115
|
+
await navigator.clipboard.writeText(P), Pe(!0), setTimeout(() => Pe(!1), 2e3);
|
|
1111
1116
|
} catch (s) {
|
|
1112
1117
|
console.error("Failed to copy link:", s);
|
|
1113
1118
|
}
|
|
1114
|
-
}, [
|
|
1119
|
+
}, [P]);
|
|
1120
|
+
p((s) => {
|
|
1121
|
+
h(s);
|
|
1122
|
+
}, [h]), p((s) => {
|
|
1123
|
+
c.closeTab(s), u.openTabs.length === 0 && ne(!1);
|
|
1124
|
+
}, [c, u.openTabs]);
|
|
1125
|
+
const It = p(() => {
|
|
1115
1126
|
se > 0 && h(N[se - 1]);
|
|
1116
|
-
}, [se, h, N]),
|
|
1127
|
+
}, [se, h, N]), Bt = p(() => {
|
|
1117
1128
|
se < N.length - 1 && h(N[se + 1]);
|
|
1118
|
-
}, [se, h, N]),
|
|
1119
|
-
|
|
1129
|
+
}, [se, h, N]), dt = p((s) => {
|
|
1130
|
+
ne(!0), h(s), j(!1);
|
|
1120
1131
|
}, [h]), Ke = p((s) => {
|
|
1121
|
-
|
|
1132
|
+
he.current = {
|
|
1122
1133
|
startX: s.clientX,
|
|
1123
1134
|
startWidth: ie
|
|
1124
1135
|
}, document.addEventListener("mousemove", Ye), document.addEventListener("mouseup", qe), document.body.style.cursor = "ew-resize", document.body.style.userSelect = "none", document.querySelectorAll("iframe").forEach((b) => {
|
|
1125
1136
|
b.style.pointerEvents = "none";
|
|
1126
1137
|
});
|
|
1127
1138
|
}, [ie]), Ye = p((s) => {
|
|
1128
|
-
if (!
|
|
1129
|
-
const b = window.innerWidth, I = (
|
|
1139
|
+
if (!he.current) return;
|
|
1140
|
+
const b = window.innerWidth, I = (he.current.startX - s.clientX) / b * 100, X = he.current.startWidth + I;
|
|
1130
1141
|
We(Math.min(Math.max(X, 25), 75));
|
|
1131
1142
|
}, []), qe = p(() => {
|
|
1132
|
-
|
|
1143
|
+
he.current = null, document.removeEventListener("mousemove", Ye), document.removeEventListener("mouseup", qe), document.body.style.cursor = "", document.body.style.userSelect = "", document.querySelectorAll("iframe").forEach((s) => {
|
|
1133
1144
|
s.style.pointerEvents = "";
|
|
1134
1145
|
});
|
|
1135
|
-
}, [Ye]),
|
|
1146
|
+
}, [Ye]), Ft = p((s) => {
|
|
1136
1147
|
if (!D.current) return;
|
|
1137
1148
|
const b = D.current.getBoundingClientRect();
|
|
1138
|
-
|
|
1149
|
+
ge.current = {
|
|
1139
1150
|
startX: s.clientX,
|
|
1140
|
-
startPosition:
|
|
1151
|
+
startPosition: xe,
|
|
1141
1152
|
contentLeft: b.left,
|
|
1142
1153
|
contentWidth: b.width
|
|
1143
1154
|
}, document.addEventListener("mousemove", Qe), document.addEventListener("mouseup", De), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.querySelectorAll("iframe").forEach((H) => {
|
|
1144
1155
|
H.style.pointerEvents = "none";
|
|
1145
1156
|
});
|
|
1146
|
-
}, [
|
|
1147
|
-
if (!
|
|
1148
|
-
const H = (s.clientX -
|
|
1157
|
+
}, [xe]), Qe = p((s) => {
|
|
1158
|
+
if (!ge.current) return;
|
|
1159
|
+
const H = (s.clientX - ge.current.contentLeft) / ge.current.contentWidth * 100;
|
|
1149
1160
|
Ve(Math.min(Math.max(H, 20), 80));
|
|
1150
1161
|
}, []), De = p(() => {
|
|
1151
|
-
|
|
1162
|
+
ge.current = null, document.removeEventListener("mousemove", Qe), document.removeEventListener("mouseup", De), document.body.style.cursor = "", document.body.style.userSelect = "", document.querySelectorAll("iframe").forEach((s) => {
|
|
1152
1163
|
s.style.pointerEvents = "";
|
|
1153
1164
|
});
|
|
1154
1165
|
}, [Qe]);
|
|
1155
1166
|
if (z(() => {
|
|
1156
|
-
r && (
|
|
1157
|
-
}, [r == null ? void 0 : r.id,
|
|
1158
|
-
(
|
|
1159
|
-
}, [
|
|
1167
|
+
r && (Ce.current && Ce.current.isPreviewable !== r.isPreviewable && (fe(!0), setTimeout(() => fe(!1), 150)), Ce.current = r, it(), re(!0), xt(), Je());
|
|
1168
|
+
}, [r == null ? void 0 : r.id, it]), z(() => {
|
|
1169
|
+
(u.viewMode === "code" || u.viewMode === "split") && Je(), u.viewMode === "edit" && ot();
|
|
1170
|
+
}, [u.viewMode, Je, ot]), z(() => (t && c.on("ai:request", t), a && c.on("save:request", a), l && c.on("export:complete", l), () => {
|
|
1160
1171
|
t && c.off("ai:request", t), a && c.off("save:request", a), l && c.off("export:complete", l);
|
|
1161
1172
|
}), [c, t, a, l]), z(() => () => {
|
|
1162
|
-
qe(), De(), U.current && (U.current.destroy(), U.current = null), clearTimeout(Oe.current), clearTimeout(
|
|
1163
|
-
}, [qe, De]), !
|
|
1173
|
+
qe(), De(), U.current && (U.current.destroy(), U.current = null), clearTimeout(Oe.current), clearTimeout(_e.current);
|
|
1174
|
+
}, [qe, De]), !u.isPanelOpen) return null;
|
|
1164
1175
|
const Ge = [
|
|
1165
1176
|
"artifactuse-panel",
|
|
1166
|
-
|
|
1177
|
+
u.isFullscreen && "artifactuse-panel--fullscreen",
|
|
1167
1178
|
!r && o && "artifactuse-panel--list",
|
|
1168
1179
|
!o && "artifactuse-panel--empty",
|
|
1169
1180
|
n
|
|
1170
|
-
].filter(Boolean).join(" "),
|
|
1181
|
+
].filter(Boolean).join(" "), Wt = [
|
|
1171
1182
|
"artifactuse-panel__content",
|
|
1172
|
-
`artifactuse-panel__content--${
|
|
1173
|
-
|
|
1183
|
+
`artifactuse-panel__content--${u.viewMode}`,
|
|
1184
|
+
de && "artifactuse-panel__content--transitioning"
|
|
1174
1185
|
].filter(Boolean).join(" ");
|
|
1175
1186
|
return o ? r ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
|
|
1176
1187
|
"div",
|
|
1177
1188
|
{
|
|
1178
1189
|
className: Ge,
|
|
1179
|
-
style:
|
|
1190
|
+
style: u.isFullscreen ? void 0 : { width: `${ie}%` }
|
|
1180
1191
|
},
|
|
1181
|
-
!
|
|
1192
|
+
!u.isFullscreen && /* @__PURE__ */ e.createElement(
|
|
1182
1193
|
"div",
|
|
1183
1194
|
{
|
|
1184
1195
|
className: "artifactuse-panel__resize-handle",
|
|
@@ -1186,55 +1197,55 @@ function ha({
|
|
|
1186
1197
|
},
|
|
1187
1198
|
/* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle-line" })
|
|
1188
1199
|
),
|
|
1189
|
-
/* @__PURE__ */ e.createElement("header", { className: "artifactuse-panel__header" },
|
|
1200
|
+
/* @__PURE__ */ e.createElement("header", { className: "artifactuse-panel__header" }, (ue || pe) && /* @__PURE__ */ e.createElement(
|
|
1190
1201
|
"button",
|
|
1191
1202
|
{
|
|
1192
1203
|
className: "artifactuse-panel__back",
|
|
1193
|
-
title: "Back to list",
|
|
1194
|
-
onClick:
|
|
1204
|
+
title: ue ? "Browse artifacts" : "Back to list",
|
|
1205
|
+
onClick: yt
|
|
1195
1206
|
},
|
|
1196
1207
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "15 18 9 12 15 6" }))
|
|
1197
1208
|
), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__title" }, /* @__PURE__ */ e.createElement(
|
|
1198
1209
|
"span",
|
|
1199
1210
|
{
|
|
1200
1211
|
className: "artifactuse-panel__icon",
|
|
1201
|
-
dangerouslySetInnerHTML: { __html: `<svg viewBox="0 0 24 24" fill="currentColor">${
|
|
1212
|
+
dangerouslySetInnerHTML: { __html: `<svg viewBox="0 0 24 24" fill="currentColor">${ce}</svg>` }
|
|
1202
1213
|
}
|
|
1203
1214
|
), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__title-content" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__name" }, r.title || "Untitled"), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__meta" }, _, r.lineCount && ` • ${r.lineCount} lines`))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__tabs" }, (!r.tabs || r.tabs.includes("preview")) && /* @__PURE__ */ e.createElement(
|
|
1204
1215
|
"button",
|
|
1205
1216
|
{
|
|
1206
|
-
className: `artifactuse-panel__tab ${
|
|
1217
|
+
className: `artifactuse-panel__tab ${u.viewMode === "preview" ? "artifactuse-panel__tab--active" : ""}`,
|
|
1207
1218
|
disabled: !r.isPreviewable,
|
|
1208
1219
|
title: "Preview",
|
|
1209
|
-
onClick: () =>
|
|
1220
|
+
onClick: () => T("preview")
|
|
1210
1221
|
},
|
|
1211
1222
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), /* @__PURE__ */ e.createElement("circle", { cx: "12", cy: "12", r: "3" }))
|
|
1212
1223
|
), (!r.tabs || r.tabs.includes("code")) && /* @__PURE__ */ e.createElement(
|
|
1213
1224
|
"button",
|
|
1214
1225
|
{
|
|
1215
|
-
className: `artifactuse-panel__tab ${
|
|
1226
|
+
className: `artifactuse-panel__tab ${u.viewMode === "code" ? "artifactuse-panel__tab--active" : ""}`,
|
|
1216
1227
|
title: "Code",
|
|
1217
|
-
onClick: () =>
|
|
1228
|
+
onClick: () => T("code")
|
|
1218
1229
|
},
|
|
1219
1230
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "16 18 22 12 16 6" }), /* @__PURE__ */ e.createElement("polyline", { points: "8 6 2 12 8 18" }))
|
|
1220
1231
|
), (!r.tabs || r.tabs.includes("split")) && /* @__PURE__ */ e.createElement(
|
|
1221
1232
|
"button",
|
|
1222
1233
|
{
|
|
1223
|
-
className: `artifactuse-panel__tab ${
|
|
1234
|
+
className: `artifactuse-panel__tab ${u.viewMode === "split" ? "artifactuse-panel__tab--active" : ""}`,
|
|
1224
1235
|
disabled: !r.isPreviewable,
|
|
1225
1236
|
title: "Split view",
|
|
1226
|
-
onClick: () =>
|
|
1237
|
+
onClick: () => T("split")
|
|
1227
1238
|
},
|
|
1228
1239
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), /* @__PURE__ */ e.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "21" }))
|
|
1229
1240
|
), r.tabs && r.tabs.includes("edit") && Xe && /* @__PURE__ */ e.createElement(
|
|
1230
1241
|
"button",
|
|
1231
1242
|
{
|
|
1232
|
-
className: `artifactuse-panel__tab ${
|
|
1243
|
+
className: `artifactuse-panel__tab ${u.viewMode === "edit" ? "artifactuse-panel__tab--active" : ""}`,
|
|
1233
1244
|
title: "Edit",
|
|
1234
|
-
onClick: () =>
|
|
1245
|
+
onClick: () => T("edit")
|
|
1235
1246
|
},
|
|
1236
1247
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), /* @__PURE__ */ e.createElement("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" }))
|
|
1237
|
-
)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__actions" },
|
|
1248
|
+
)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__actions" }, u.viewMode === "edit" && /* @__PURE__ */ e.createElement(
|
|
1238
1249
|
"button",
|
|
1239
1250
|
{
|
|
1240
1251
|
className: "artifactuse-panel__action artifactuse-panel__action--save",
|
|
@@ -1246,35 +1257,35 @@ function ha({
|
|
|
1246
1257
|
"button",
|
|
1247
1258
|
{
|
|
1248
1259
|
className: "artifactuse-panel__action",
|
|
1249
|
-
title:
|
|
1250
|
-
onClick:
|
|
1260
|
+
title: u.isFullscreen ? "Exit fullscreen" : "Fullscreen",
|
|
1261
|
+
onClick: M
|
|
1251
1262
|
},
|
|
1252
|
-
|
|
1263
|
+
u.isFullscreen ? /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "4 14 10 14 10 20" }), /* @__PURE__ */ e.createElement("polyline", { points: "20 10 14 10 14 4" }), /* @__PURE__ */ e.createElement("line", { x1: "14", y1: "10", x2: "21", y2: "3" }), /* @__PURE__ */ e.createElement("line", { x1: "3", y1: "21", x2: "10", y2: "14" })) : /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "15 3 21 3 21 9" }), /* @__PURE__ */ e.createElement("polyline", { points: "9 21 3 21 3 15" }), /* @__PURE__ */ e.createElement("line", { x1: "21", y1: "3", x2: "14", y2: "10" }), /* @__PURE__ */ e.createElement("line", { x1: "3", y1: "21", x2: "10", y2: "14" }))
|
|
1253
1264
|
), /* @__PURE__ */ e.createElement(
|
|
1254
1265
|
"button",
|
|
1255
1266
|
{
|
|
1256
1267
|
className: "artifactuse-panel__action artifactuse-panel__action--close",
|
|
1257
1268
|
title: "Close",
|
|
1258
|
-
onClick:
|
|
1269
|
+
onClick: k
|
|
1259
1270
|
},
|
|
1260
1271
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ e.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))
|
|
1261
1272
|
))),
|
|
1262
|
-
/* @__PURE__ */ e.createElement("div", { className:
|
|
1273
|
+
/* @__PURE__ */ e.createElement("div", { className: Wt, ref: D }, de && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__loading" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__spinner" })), (u.viewMode === "preview" || u.viewMode === "split") && /* @__PURE__ */ e.createElement(
|
|
1263
1274
|
"div",
|
|
1264
1275
|
{
|
|
1265
1276
|
className: "artifactuse-panel__preview",
|
|
1266
|
-
style:
|
|
1277
|
+
style: u.viewMode === "split" ? { width: `${xe}%` } : void 0
|
|
1267
1278
|
},
|
|
1268
|
-
|
|
1279
|
+
me && oe && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__loading" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__spinner" })),
|
|
1269
1280
|
oe ? /* @__PURE__ */ e.createElement(
|
|
1270
1281
|
"iframe",
|
|
1271
1282
|
{
|
|
1272
1283
|
ref: E,
|
|
1273
1284
|
src: oe,
|
|
1274
|
-
className: `artifactuse-panel__iframe ${
|
|
1285
|
+
className: `artifactuse-panel__iframe ${me ? "artifactuse-panel__iframe--loading" : ""}`,
|
|
1275
1286
|
sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads allow-top-navigation-by-user-activation",
|
|
1276
1287
|
allow: "camera; microphone; fullscreen; geolocation; display-capture; autoplay; clipboard-write",
|
|
1277
|
-
onLoad:
|
|
1288
|
+
onLoad: wt,
|
|
1278
1289
|
onError: kt
|
|
1279
1290
|
}
|
|
1280
1291
|
) : /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__no-preview" }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }, /* @__PURE__ */ e.createElement("path", { d: "M9 17H7A5 5 0 0 1 7 7h2" }), /* @__PURE__ */ e.createElement("path", { d: "M15 7h2a5 5 0 1 1 0 10h-2" }), /* @__PURE__ */ e.createElement("line", { x1: "8", y1: "12", x2: "16", y2: "12" })), /* @__PURE__ */ e.createElement("p", null, "Preview not available for ", _))
|
|
@@ -1283,15 +1294,15 @@ function ha({
|
|
|
1283
1294
|
{
|
|
1284
1295
|
className: "artifactuse-panel__code",
|
|
1285
1296
|
style: {
|
|
1286
|
-
...
|
|
1287
|
-
display:
|
|
1297
|
+
...u.viewMode === "split" ? { width: `${100 - xe}%` } : {},
|
|
1298
|
+
display: u.viewMode === "code" || u.viewMode === "split" ? void 0 : "none"
|
|
1288
1299
|
}
|
|
1289
1300
|
},
|
|
1290
|
-
|
|
1301
|
+
u.viewMode === "split" && /* @__PURE__ */ e.createElement(
|
|
1291
1302
|
"div",
|
|
1292
1303
|
{
|
|
1293
1304
|
className: "artifactuse-panel__split-handle",
|
|
1294
|
-
onMouseDown:
|
|
1305
|
+
onMouseDown: Ft
|
|
1295
1306
|
},
|
|
1296
1307
|
/* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__split-handle-line" })
|
|
1297
1308
|
),
|
|
@@ -1306,7 +1317,7 @@ function ha({
|
|
|
1306
1317
|
"div",
|
|
1307
1318
|
{
|
|
1308
1319
|
className: "artifactuse-panel__edit",
|
|
1309
|
-
style: { display:
|
|
1320
|
+
style: { display: u.viewMode === "edit" ? void 0 : "none" }
|
|
1310
1321
|
},
|
|
1311
1322
|
/* @__PURE__ */ e.createElement("div", { ref: q, className: "artifactuse-panel__editor-container" })
|
|
1312
1323
|
)),
|
|
@@ -1321,12 +1332,12 @@ function ha({
|
|
|
1321
1332
|
},
|
|
1322
1333
|
/* @__PURE__ */ e.createElement("svg", { width: "16", height: "16", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ e.createElement("path", { d: "M16.6667 41.6673V10.4173C16.6667 9.86478 16.4472 9.33488 16.0565 8.94418C15.6658 8.55348 15.1359 8.33398 14.5833 8.33398H4.16667C3.0616 8.33398 2.00179 8.77297 1.22039 9.55437C0.438987 10.3358 0 11.3956 0 12.5007V37.5006C0 38.6057 0.438987 39.6655 1.22039 40.4469C2.00179 41.2283 3.0616 41.6673 4.16667 41.6673H29.1667C30.2717 41.6673 31.3315 41.2283 32.1129 40.4469C32.8943 39.6655 33.3333 38.6057 33.3333 37.5006V27.084C33.3333 26.5314 33.1138 26.0015 32.7231 25.6108C32.3324 25.2201 31.8025 25.0007 31.25 25.0007H0", fill: "#5F51C8" }), /* @__PURE__ */ e.createElement("path", { d: "M39.5833 0H27.0833C25.9327 0 25 0.93274 25 2.08333V14.5833C25 15.7339 25.9327 16.6667 27.0833 16.6667H39.5833C40.7339 16.6667 41.6667 15.7339 41.6667 14.5833V2.08333C41.6667 0.93274 40.7339 0 39.5833 0Z", fill: "#695AE0" })),
|
|
1323
1334
|
/* @__PURE__ */ e.createElement("span", null, "Artifactuse")
|
|
1324
|
-
), r.code && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__badge artifactuse-panel__badge--secondary" },
|
|
1335
|
+
), r.code && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__badge artifactuse-panel__badge--secondary" }, ht(r.size))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__footer-right" }, /* @__PURE__ */ e.createElement(
|
|
1325
1336
|
"button",
|
|
1326
1337
|
{
|
|
1327
1338
|
className: `artifactuse-panel__footer-action ${R ? "artifactuse-panel__footer-action--success" : ""}`,
|
|
1328
1339
|
title: R ? "Copied!" : "Copy code",
|
|
1329
|
-
onClick:
|
|
1340
|
+
onClick: Ct
|
|
1330
1341
|
},
|
|
1331
1342
|
R ? /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "20 6 9 17 4 12" })) : /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), /* @__PURE__ */ e.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }))
|
|
1332
1343
|
), /* @__PURE__ */ e.createElement(
|
|
@@ -1334,7 +1345,7 @@ function ha({
|
|
|
1334
1345
|
{
|
|
1335
1346
|
className: "artifactuse-panel__footer-action",
|
|
1336
1347
|
title: "Download",
|
|
1337
|
-
onClick:
|
|
1348
|
+
onClick: Lt
|
|
1338
1349
|
},
|
|
1339
1350
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), /* @__PURE__ */ e.createElement("polyline", { points: "7 10 12 15 17 10" }), /* @__PURE__ */ e.createElement("line", { x1: "12", y1: "15", x2: "12", y2: "3" }))
|
|
1340
1351
|
), W && /* @__PURE__ */ e.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ e.createElement(
|
|
@@ -1345,24 +1356,24 @@ function ha({
|
|
|
1345
1356
|
onClick: Mt
|
|
1346
1357
|
},
|
|
1347
1358
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("circle", { cx: "18", cy: "5", r: "3" }), /* @__PURE__ */ e.createElement("circle", { cx: "6", cy: "12", r: "3" }), /* @__PURE__ */ e.createElement("circle", { cx: "18", cy: "19", r: "3" }), /* @__PURE__ */ e.createElement("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49" }), /* @__PURE__ */ e.createElement("line", { x1: "15.41", y1: "6.51", x2: "8.59", y2: "10.49" }))
|
|
1348
|
-
), d && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__header" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-share-popup__title" }, y === "success" ?
|
|
1359
|
+
), d && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__header" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-share-popup__title" }, y === "success" ? ve ? "Artifact updated!" : "Link created!" : y === "update-list" ? "Update saved artifact" : "Share Artifact"), /* @__PURE__ */ e.createElement("button", { className: "artifactuse-share-popup__close", onClick: Pt }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ e.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__body" }, y === "loading" && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__loading" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__spinner" }), /* @__PURE__ */ e.createElement("p", { className: "artifactuse-share-popup__loading-text" }, "Creating link...")), y === "error" && /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__error" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-share-popup__error-text" }, $e)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__actions" }, /* @__PURE__ */ e.createElement("button", { className: "artifactuse-share-popup__btn artifactuse-share-popup__btn--secondary", onClick: () => v("options") }, "Back"), /* @__PURE__ */ e.createElement("button", { className: "artifactuse-share-popup__btn artifactuse-share-popup__btn--primary", onClick: St }, "Retry"))), y === "options" && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__options" }, /* @__PURE__ */ e.createElement("button", { className: "artifactuse-share-popup__option", onClick: Ze }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__option-icon" }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }), /* @__PURE__ */ e.createElement("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" }))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__option-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-share-popup__option-title" }, "Share link"), /* @__PURE__ */ e.createElement("p", { className: "artifactuse-share-popup__option-desc" }, "Expires in 30 days"))), /* @__PURE__ */ e.createElement("button", { className: "artifactuse-share-popup__option", onClick: mt }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__option-icon" }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }), /* @__PURE__ */ e.createElement("polyline", { points: "17 21 17 13 7 13 7 21" }), /* @__PURE__ */ e.createElement("polyline", { points: "7 3 7 8 15 8" }))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__option-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-share-popup__option-title" }, "Save to account"), /* @__PURE__ */ e.createElement("p", { className: "artifactuse-share-popup__option-desc" }, "Permanent, manageable"))), /* @__PURE__ */ e.createElement("button", { className: "artifactuse-share-popup__option", onClick: At }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__option-icon" }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "23 4 23 10 17 10" }), /* @__PURE__ */ e.createElement("polyline", { points: "1 20 1 14 7 14" }), /* @__PURE__ */ e.createElement("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" }))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__option-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-share-popup__option-title" }, "Update saved"), /* @__PURE__ */ e.createElement("p", { className: "artifactuse-share-popup__option-desc" }, "Replace an existing artifact")))), y === "update-list" && /* @__PURE__ */ e.createElement("div", null, Be ? /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__loading" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__spinner" }), /* @__PURE__ */ e.createElement("p", { className: "artifactuse-share-popup__loading-text" }, "Loading artifacts...")) : le.length === 0 ? /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__empty" }, "No saved artifacts of this type") : /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__artifact-list" }, le.map((s) => {
|
|
1349
1360
|
var b, H, I;
|
|
1350
1361
|
return /* @__PURE__ */ e.createElement(
|
|
1351
1362
|
"button",
|
|
1352
1363
|
{
|
|
1353
1364
|
key: ((b = s.project) == null ? void 0 : b.uuid) || s.id,
|
|
1354
1365
|
className: "artifactuse-share-popup__artifact-item",
|
|
1355
|
-
onClick: () =>
|
|
1366
|
+
onClick: () => $t(s)
|
|
1356
1367
|
},
|
|
1357
1368
|
/* @__PURE__ */ e.createElement("span", { className: "artifactuse-share-popup__artifact-name" }, ((H = s.project) == null ? void 0 : H.name) || "Untitled"),
|
|
1358
|
-
/* @__PURE__ */ e.createElement("span", { className: "artifactuse-share-popup__artifact-date" },
|
|
1369
|
+
/* @__PURE__ */ e.createElement("span", { className: "artifactuse-share-popup__artifact-date" }, ut((I = s.project) == null ? void 0 : I.created_at))
|
|
1359
1370
|
);
|
|
1360
1371
|
})), /* @__PURE__ */ e.createElement("button", { className: "artifactuse-share-popup__back-btn", onClick: () => v("options") }, "Back")), y === "success" && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__success" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__success-icon" }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "20 6 9 17 4 12" }))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__link-wrapper" }, /* @__PURE__ */ e.createElement(
|
|
1361
1372
|
"input",
|
|
1362
1373
|
{
|
|
1363
1374
|
type: "text",
|
|
1364
1375
|
className: "artifactuse-share-popup__link",
|
|
1365
|
-
value:
|
|
1376
|
+
value: P,
|
|
1366
1377
|
readOnly: !0,
|
|
1367
1378
|
onClick: (s) => s.target.select()
|
|
1368
1379
|
}
|
|
@@ -1370,16 +1381,16 @@ function ha({
|
|
|
1370
1381
|
"button",
|
|
1371
1382
|
{
|
|
1372
1383
|
className: `artifactuse-share-popup__copy-btn ${He ? "artifactuse-share-popup__copy-btn--copied" : ""}`,
|
|
1373
|
-
onClick:
|
|
1384
|
+
onClick: Ht
|
|
1374
1385
|
},
|
|
1375
1386
|
He ? "Copied!" : "Copy"
|
|
1376
|
-
)),
|
|
1387
|
+
)), be && !we && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__expiry" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-share-popup__expiry-icon" }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ e.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), /* @__PURE__ */ e.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" }))), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-share-popup__expiry-text" }, "Expires ", ut(be))), !we && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__save-prompt" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-share-popup__save-prompt-text" }, "Keep it permanently?"), /* @__PURE__ */ e.createElement("button", { className: "artifactuse-share-popup__save-prompt-btn", onClick: mt }, "Save to account")))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-share-popup__footer" }, /* @__PURE__ */ e.createElement("a", { href: "https://artifactuse.com", target: "_blank", rel: "noopener noreferrer", className: "artifactuse-share-popup__branding" }, /* @__PURE__ */ e.createElement("svg", { width: "12", height: "12", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ e.createElement("path", { d: "M16.6667 41.6673V10.4173C16.6667 9.86478 16.4472 9.33488 16.0565 8.94418C15.6658 8.55348 15.1359 8.33398 14.5833 8.33398H4.16667C3.0616 8.33398 2.00179 8.77297 1.22039 9.55437C0.438987 10.3358 0 11.3956 0 12.5007V37.5006C0 38.6057 0.438987 39.6655 1.22039 40.4469C2.00179 41.2283 3.0616 41.6673 4.16667 41.6673H29.1667C30.2717 41.6673 31.3315 41.2283 32.1129 40.4469C32.8943 39.6655 33.3333 38.6057 33.3333 37.5006V27.084C33.3333 26.5314 33.1138 26.0015 32.7231 25.6108C32.3324 25.2201 31.8025 25.0007 31.25 25.0007H0", fill: "#5F51C8" }), /* @__PURE__ */ e.createElement("path", { d: "M39.5833 0H27.0833C25.9327 0 25 0.93274 25 2.08333V14.5833C25 15.7339 25.9327 16.6667 27.0833 16.6667H39.5833C40.7339 16.6667 41.6667 15.7339 41.6667 14.5833V2.08333C41.6667 0.93274 40.7339 0 39.5833 0Z", fill: "#695AE0" })), /* @__PURE__ */ e.createElement("span", null, "Powered by Artifactuse"))))), N.length > 1 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__nav" }, /* @__PURE__ */ e.createElement(
|
|
1377
1388
|
"button",
|
|
1378
1389
|
{
|
|
1379
1390
|
className: "artifactuse-panel__nav-btn",
|
|
1380
1391
|
disabled: se <= 0,
|
|
1381
1392
|
title: "Previous artifact",
|
|
1382
|
-
onClick:
|
|
1393
|
+
onClick: It
|
|
1383
1394
|
},
|
|
1384
1395
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "15 18 9 12 15 6" }))
|
|
1385
1396
|
), /* @__PURE__ */ e.createElement(
|
|
@@ -1396,7 +1407,7 @@ function ha({
|
|
|
1396
1407
|
className: "artifactuse-panel__nav-btn",
|
|
1397
1408
|
disabled: se >= N.length - 1,
|
|
1398
1409
|
title: "Next artifact",
|
|
1399
|
-
onClick:
|
|
1410
|
+
onClick: Bt
|
|
1400
1411
|
},
|
|
1401
1412
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "9 18 15 12 9 6" }))
|
|
1402
1413
|
), A && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__artifact-list" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__artifact-list-header" }, /* @__PURE__ */ e.createElement("span", null, "All Artifacts (", N.length, ")"), /* @__PURE__ */ e.createElement(
|
|
@@ -1411,25 +1422,25 @@ function ha({
|
|
|
1411
1422
|
{
|
|
1412
1423
|
key: s.id,
|
|
1413
1424
|
className: `artifactuse-panel__artifact-item ${s.id === r.id ? "artifactuse-panel__artifact-item--active" : ""}`,
|
|
1414
|
-
onClick: () =>
|
|
1425
|
+
onClick: () => dt(s)
|
|
1415
1426
|
},
|
|
1416
1427
|
/* @__PURE__ */ e.createElement(
|
|
1417
1428
|
"span",
|
|
1418
1429
|
{
|
|
1419
1430
|
className: "artifactuse-panel__artifact-item-icon",
|
|
1420
|
-
dangerouslySetInnerHTML: { __html:
|
|
1431
|
+
dangerouslySetInnerHTML: { __html: nt(s.language) }
|
|
1421
1432
|
}
|
|
1422
1433
|
),
|
|
1423
1434
|
/* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__artifact-item-content" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-title" }, s.title || "Untitled"), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-meta" }, Ue(s.language), s.lineCount && ` • ${s.lineCount} lines`)),
|
|
1424
1435
|
/* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-index" }, b + 1)
|
|
1425
1436
|
)))))))
|
|
1426
|
-
)) : /* @__PURE__ */ e.createElement("div", { className: Ge, style:
|
|
1437
|
+
)) : /* @__PURE__ */ e.createElement("div", { className: Ge, style: u.isFullscreen ? void 0 : { width: `${K}%` } }, !u.isFullscreen && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle", onMouseDown: Ke }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle-line" })), /* @__PURE__ */ e.createElement("header", { className: "artifactuse-panel__header artifactuse-panel__header--simple" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__title" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__icon" }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "16 18 22 12 16 6" }), /* @__PURE__ */ e.createElement("polyline", { points: "8 6 2 12 8 18" }))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__title-content" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__name" }, "Artifacts"), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__meta" }, N.length, " available"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__actions" }, /* @__PURE__ */ e.createElement(
|
|
1427
1438
|
"button",
|
|
1428
1439
|
{
|
|
1429
1440
|
className: `artifactuse-panel__action ${Q ? "artifactuse-panel__action--loading" : ""}`,
|
|
1430
1441
|
disabled: Q,
|
|
1431
1442
|
title: "Download all as ZIP",
|
|
1432
|
-
onClick:
|
|
1443
|
+
onClick: Tt
|
|
1433
1444
|
},
|
|
1434
1445
|
Q ? /* @__PURE__ */ e.createElement("svg", { className: "artifactuse-panel__spinner-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "32", strokeDashoffset: "32" })) : /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), /* @__PURE__ */ e.createElement("polyline", { points: "7 10 12 15 17 10" }), /* @__PURE__ */ e.createElement("line", { x1: "12", y1: "15", x2: "12", y2: "3" }))
|
|
1435
1446
|
), /* @__PURE__ */ e.createElement(
|
|
@@ -1437,7 +1448,7 @@ function ha({
|
|
|
1437
1448
|
{
|
|
1438
1449
|
className: "artifactuse-panel__action artifactuse-panel__action--close",
|
|
1439
1450
|
title: "Close panel",
|
|
1440
|
-
onClick:
|
|
1451
|
+
onClick: k
|
|
1441
1452
|
},
|
|
1442
1453
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ e.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))
|
|
1443
1454
|
))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__list" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__list-items" }, N.map((s, b) => /* @__PURE__ */ e.createElement(
|
|
@@ -1445,13 +1456,13 @@ function ha({
|
|
|
1445
1456
|
{
|
|
1446
1457
|
key: s.id,
|
|
1447
1458
|
className: "artifactuse-panel__list-item",
|
|
1448
|
-
onClick: () =>
|
|
1459
|
+
onClick: () => dt(s)
|
|
1449
1460
|
},
|
|
1450
1461
|
/* @__PURE__ */ e.createElement(
|
|
1451
1462
|
"span",
|
|
1452
1463
|
{
|
|
1453
1464
|
className: "artifactuse-panel__list-item-icon",
|
|
1454
|
-
dangerouslySetInnerHTML: { __html:
|
|
1465
|
+
dangerouslySetInnerHTML: { __html: nt(s.language) }
|
|
1455
1466
|
}
|
|
1456
1467
|
),
|
|
1457
1468
|
/* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__list-item-content" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__list-item-title" }, s.title || "Untitled"), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__list-item-meta" }, Ue(s.language), s.lineCount && ` • ${s.lineCount} lines`)),
|
|
@@ -1466,12 +1477,12 @@ function ha({
|
|
|
1466
1477
|
},
|
|
1467
1478
|
/* @__PURE__ */ e.createElement("svg", { width: "16", height: "16", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ e.createElement("path", { d: "M16.6667 41.6673V10.4173C16.6667 9.86478 16.4472 9.33488 16.0565 8.94418C15.6658 8.55348 15.1359 8.33398 14.5833 8.33398H4.16667C3.0616 8.33398 2.00179 8.77297 1.22039 9.55437C0.438987 10.3358 0 11.3956 0 12.5007V37.5006C0 38.6057 0.438987 39.6655 1.22039 40.4469C2.00179 41.2283 3.0616 41.6673 4.16667 41.6673H29.1667C30.2717 41.6673 31.3315 41.2283 32.1129 40.4469C32.8943 39.6655 33.3333 38.6057 33.3333 37.5006V27.084C33.3333 26.5314 33.1138 26.0015 32.7231 25.6108C32.3324 25.2201 31.8025 25.0007 31.25 25.0007H0", fill: "#5F51C8" }), /* @__PURE__ */ e.createElement("path", { d: "M39.5833 0H27.0833C25.9327 0 25 0.93274 25 2.08333V14.5833C25 15.7339 25.9327 16.6667 27.0833 16.6667H39.5833C40.7339 16.6667 41.6667 15.7339 41.6667 14.5833V2.08333C41.6667 0.93274 40.7339 0 39.5833 0Z", fill: "#695AE0" })),
|
|
1468
1479
|
/* @__PURE__ */ e.createElement("span", null, "Artifactuse")
|
|
1469
|
-
))) : /* @__PURE__ */ e.createElement("div", { className: Ge, style:
|
|
1480
|
+
))) : /* @__PURE__ */ e.createElement("div", { className: Ge, style: u.isFullscreen ? void 0 : { width: `${K}%` } }, !u.isFullscreen && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle", onMouseDown: Ke }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle-line" })), /* @__PURE__ */ e.createElement("header", { className: "artifactuse-panel__header artifactuse-panel__header--simple" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__title" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__icon" }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "16 18 22 12 16 6" }), /* @__PURE__ */ e.createElement("polyline", { points: "8 6 2 12 8 18" }))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__title-content" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__name" }, "Artifacts"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__actions" }, /* @__PURE__ */ e.createElement(
|
|
1470
1481
|
"button",
|
|
1471
1482
|
{
|
|
1472
1483
|
className: "artifactuse-panel__action artifactuse-panel__action--close",
|
|
1473
1484
|
title: "Close panel",
|
|
1474
|
-
onClick:
|
|
1485
|
+
onClick: k
|
|
1475
1486
|
},
|
|
1476
1487
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ e.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))
|
|
1477
1488
|
))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__empty" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__empty-icon" }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }, /* @__PURE__ */ e.createElement("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }), /* @__PURE__ */ e.createElement("polyline", { points: "14 2 14 8 20 8" }))), /* @__PURE__ */ e.createElement("h3", { className: "artifactuse-panel__empty-title" }, "No artifacts yet"), /* @__PURE__ */ e.createElement("p", { className: "artifactuse-panel__empty-text" }, "Code blocks, forms, and other interactive content will appear here as the AI generates them.")), /* @__PURE__ */ e.createElement("footer", { className: "artifactuse-panel__footer artifactuse-panel__footer--simple" }, f && /* @__PURE__ */ e.createElement(
|
|
@@ -1486,8 +1497,8 @@ function ha({
|
|
|
1486
1497
|
/* @__PURE__ */ e.createElement("span", null, "Artifactuse")
|
|
1487
1498
|
)));
|
|
1488
1499
|
}
|
|
1489
|
-
function
|
|
1490
|
-
const { state: a, artifactCount: l, hasArtifacts: n, togglePanel: i } =
|
|
1500
|
+
function _a({ className: t = "" }) {
|
|
1501
|
+
const { state: a, artifactCount: l, hasArtifacts: n, togglePanel: i } = Me(), m = C(() => l > 99 ? "99+" : String(l), [l]), u = [
|
|
1491
1502
|
"artifactuse-panel-toggle",
|
|
1492
1503
|
a.isPanelOpen && "artifactuse-panel-toggle--active",
|
|
1493
1504
|
n && "artifactuse-panel-toggle--has-artifacts",
|
|
@@ -1496,54 +1507,58 @@ function ga({ className: t = "" }) {
|
|
|
1496
1507
|
return /* @__PURE__ */ e.createElement(
|
|
1497
1508
|
"button",
|
|
1498
1509
|
{
|
|
1499
|
-
className:
|
|
1510
|
+
className: u,
|
|
1500
1511
|
onClick: i,
|
|
1501
1512
|
title: a.isPanelOpen ? "Close artifacts panel" : "Open artifacts panel"
|
|
1502
1513
|
},
|
|
1503
1514
|
/* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ e.createElement("polyline", { points: "16 18 22 12 16 6" }), /* @__PURE__ */ e.createElement("polyline", { points: "8 6 2 12 8 18" })),
|
|
1504
|
-
l > 0 && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel-toggle-badge" },
|
|
1515
|
+
l > 0 && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel-toggle-badge" }, m)
|
|
1505
1516
|
);
|
|
1506
1517
|
}
|
|
1507
|
-
const
|
|
1508
|
-
function
|
|
1518
|
+
const _t = Vt(null);
|
|
1519
|
+
function ma({ children: t, config: a = {} }) {
|
|
1509
1520
|
const l = B(null);
|
|
1510
|
-
l.current || (l.current =
|
|
1511
|
-
const n = l.current, [i,
|
|
1521
|
+
l.current || (l.current = Dt(a));
|
|
1522
|
+
const n = l.current, [i, m] = w({
|
|
1512
1523
|
artifacts: [],
|
|
1513
1524
|
activeArtifactId: null,
|
|
1514
1525
|
isPanelOpen: !1,
|
|
1515
1526
|
viewMode: "preview",
|
|
1516
|
-
isFullscreen: !1
|
|
1517
|
-
|
|
1527
|
+
isFullscreen: !1,
|
|
1528
|
+
openTabs: [],
|
|
1529
|
+
tabViewModes: {}
|
|
1530
|
+
}), [u, r] = w(() => n.getPanelTypes());
|
|
1518
1531
|
z(() => {
|
|
1519
1532
|
const E = n.state.subscribe((g) => {
|
|
1520
|
-
|
|
1533
|
+
m({
|
|
1521
1534
|
artifacts: g.artifacts,
|
|
1522
1535
|
activeArtifactId: g.activeArtifactId,
|
|
1523
1536
|
isPanelOpen: g.isPanelOpen,
|
|
1524
1537
|
viewMode: g.viewMode,
|
|
1525
|
-
isFullscreen: g.isFullscreen
|
|
1538
|
+
isFullscreen: g.isFullscreen,
|
|
1539
|
+
openTabs: g.openTabs,
|
|
1540
|
+
tabViewModes: g.tabViewModes
|
|
1526
1541
|
});
|
|
1527
1542
|
});
|
|
1528
1543
|
return n.applyTheme(), () => {
|
|
1529
1544
|
E(), n.destroy();
|
|
1530
1545
|
};
|
|
1531
1546
|
}, [n]);
|
|
1532
|
-
const x =
|
|
1547
|
+
const x = C(() => i.activeArtifactId && i.artifacts.find((E) => E.id === i.activeArtifactId) || null, [i.artifacts, i.activeArtifactId]), o = i.artifacts.filter((E) => !E.isInline).length, k = o > 0, M = C(() => x ? n.getPanelUrl(x) : null, [x, n]), T = p((E) => {
|
|
1533
1548
|
n.setTheme(E), n.applyTheme();
|
|
1534
1549
|
}, [n]), $ = p((E, g) => {
|
|
1535
1550
|
n.registerPanel(E, g), r(n.getPanelTypes());
|
|
1536
1551
|
}, [n]), h = p((E) => {
|
|
1537
1552
|
n.unregisterPanel(E), r(n.getPanelTypes());
|
|
1538
|
-
}, [n]), c =
|
|
1553
|
+
}, [n]), c = C(() => ({
|
|
1539
1554
|
instance: n,
|
|
1540
1555
|
state: i,
|
|
1541
1556
|
activeArtifact: x,
|
|
1542
1557
|
artifactCount: o,
|
|
1543
|
-
hasArtifacts:
|
|
1558
|
+
hasArtifacts: k,
|
|
1544
1559
|
// Panel computed
|
|
1545
|
-
panelTypes:
|
|
1546
|
-
activePanelUrl:
|
|
1560
|
+
panelTypes: u,
|
|
1561
|
+
activePanelUrl: M,
|
|
1547
1562
|
// Methods
|
|
1548
1563
|
processMessage: n.processMessage,
|
|
1549
1564
|
initializeContent: n.initializeContent,
|
|
@@ -1562,6 +1577,10 @@ function ua({ children: t, config: a = {} }) {
|
|
|
1562
1577
|
registerPanel: $,
|
|
1563
1578
|
unregisterPanel: h,
|
|
1564
1579
|
getPanelTypes: n.getPanelTypes,
|
|
1580
|
+
// Multi-tab
|
|
1581
|
+
closeTab: n.closeTab,
|
|
1582
|
+
closeOtherTabs: n.closeOtherTabs,
|
|
1583
|
+
closeAllTabs: n.closeAllTabs,
|
|
1565
1584
|
// Events
|
|
1566
1585
|
on: n.on,
|
|
1567
1586
|
off: n.off,
|
|
@@ -1569,30 +1588,30 @@ function ua({ children: t, config: a = {} }) {
|
|
|
1569
1588
|
clearArtifacts: () => n.state.clear(),
|
|
1570
1589
|
// Theme
|
|
1571
1590
|
applyTheme: n.applyTheme,
|
|
1572
|
-
setTheme:
|
|
1591
|
+
setTheme: T,
|
|
1573
1592
|
getTheme: n.getTheme
|
|
1574
1593
|
}), [
|
|
1575
1594
|
n,
|
|
1576
1595
|
i,
|
|
1577
1596
|
x,
|
|
1578
1597
|
o,
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1598
|
+
k,
|
|
1599
|
+
u,
|
|
1600
|
+
M,
|
|
1601
|
+
T,
|
|
1583
1602
|
$,
|
|
1584
1603
|
h
|
|
1585
1604
|
]);
|
|
1586
|
-
return /* @__PURE__ */ e.createElement(
|
|
1605
|
+
return /* @__PURE__ */ e.createElement(_t.Provider, { value: c }, t);
|
|
1587
1606
|
}
|
|
1588
|
-
function
|
|
1589
|
-
const t =
|
|
1607
|
+
function Me() {
|
|
1608
|
+
const t = zt(_t);
|
|
1590
1609
|
if (!t)
|
|
1591
1610
|
throw new Error("useArtifactuse must be used within an ArtifactuseProvider");
|
|
1592
1611
|
return t;
|
|
1593
1612
|
}
|
|
1594
|
-
function
|
|
1595
|
-
const { on: l, off: n } =
|
|
1613
|
+
function da(t, a) {
|
|
1614
|
+
const { on: l, off: n } = Me();
|
|
1596
1615
|
z(() => {
|
|
1597
1616
|
const i = l(t, a);
|
|
1598
1617
|
return () => {
|
|
@@ -1600,45 +1619,45 @@ function ma(t, a) {
|
|
|
1600
1619
|
};
|
|
1601
1620
|
}, [t, a, l, n]);
|
|
1602
1621
|
}
|
|
1603
|
-
function
|
|
1622
|
+
function fa() {
|
|
1604
1623
|
const {
|
|
1605
1624
|
registerPanel: t,
|
|
1606
1625
|
unregisterPanel: a,
|
|
1607
1626
|
hasPanel: l,
|
|
1608
1627
|
panelTypes: n,
|
|
1609
1628
|
instance: i
|
|
1610
|
-
} =
|
|
1629
|
+
} = Me(), m = p((r) => l({ type: r }), [l]), u = p((r, x = {}) => {
|
|
1611
1630
|
var o;
|
|
1612
1631
|
return ((o = i.panelResolver) == null ? void 0 : o.resolve(r, x)) || null;
|
|
1613
1632
|
}, [i]);
|
|
1614
1633
|
return {
|
|
1615
1634
|
register: t,
|
|
1616
1635
|
unregister: a,
|
|
1617
|
-
isRegistered:
|
|
1618
|
-
getPanelUrl:
|
|
1636
|
+
isRegistered: m,
|
|
1637
|
+
getPanelUrl: u,
|
|
1619
1638
|
types: n,
|
|
1620
|
-
defaults:
|
|
1639
|
+
defaults: gt
|
|
1621
1640
|
};
|
|
1622
1641
|
}
|
|
1623
|
-
const
|
|
1624
|
-
ArtifactuseProvider:
|
|
1625
|
-
useArtifactuse:
|
|
1626
|
-
useArtifactuseEvent:
|
|
1627
|
-
usePanelRegistry:
|
|
1628
|
-
DEFAULT_PANELS:
|
|
1642
|
+
const ya = {
|
|
1643
|
+
ArtifactuseProvider: ma,
|
|
1644
|
+
useArtifactuse: Me,
|
|
1645
|
+
useArtifactuseEvent: da,
|
|
1646
|
+
usePanelRegistry: fa,
|
|
1647
|
+
DEFAULT_PANELS: gt
|
|
1629
1648
|
};
|
|
1630
1649
|
export {
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1650
|
+
ua as ArtifactuseAgentMessage,
|
|
1651
|
+
Ot as ArtifactuseCard,
|
|
1652
|
+
Zt as ArtifactuseInlineForm,
|
|
1653
|
+
ga as ArtifactusePanel,
|
|
1654
|
+
_a as ArtifactusePanelToggle,
|
|
1655
|
+
ma as ArtifactuseProvider,
|
|
1656
|
+
na as ArtifactuseSocialPreview,
|
|
1657
|
+
la as ArtifactuseViewer,
|
|
1658
|
+
gt as DEFAULT_PANELS,
|
|
1659
|
+
ya as default,
|
|
1660
|
+
Me as useArtifactuse,
|
|
1661
|
+
da as useArtifactuseEvent,
|
|
1662
|
+
fa as usePanelRegistry
|
|
1644
1663
|
};
|