artifactuse 0.1.17 → 0.1.19
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/react/index.js +109 -109
- package/dist/styles/components/panel.css +28 -1
- package/dist/svelte/index.js +135 -135
- package/dist/vue/index.js +404 -378
- package/dist/vue2/index.js +68 -0
- package/package.json +1 -1
package/dist/react/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e, { useState as b, useMemo as P, useCallback as u, useRef as F, useEffect as
|
|
1
|
+
import e, { useState as b, useMemo as P, useCallback as u, useRef as F, useEffect as V, createContext as _t, useContext as Nt } from "react";
|
|
2
2
|
import { g as $e, f as tt, a as Je, b as Xe, n as bt, i as kt, D as at, c as wt } from "../index-DMwUX4z1.js";
|
|
3
3
|
import { J as xt } from "../jszip.min-CdmYyw5L.js";
|
|
4
4
|
import { createPortal as Ct } from "react-dom";
|
|
@@ -36,8 +36,8 @@ function Lt({
|
|
|
36
36
|
}, [t, n]), d = u((k) => {
|
|
37
37
|
var L;
|
|
38
38
|
k.stopPropagation();
|
|
39
|
-
const p = new Blob([t.code], { type: "text/plain" }), h = URL.createObjectURL(p), H = document.createElement("a"), U = Xe(t.language),
|
|
40
|
-
H.href = h, H.download = `${
|
|
39
|
+
const p = new Blob([t.code], { type: "text/plain" }), h = URL.createObjectURL(p), H = document.createElement("a"), U = Xe(t.language), z = ((L = t.title) == null ? void 0 : L.replace(/[^a-z0-9]/gi, "_").toLowerCase()) || "code";
|
|
40
|
+
H.href = h, H.download = `${z}.${U}`, document.body.appendChild(H), H.click(), document.body.removeChild(H), URL.revokeObjectURL(h), s && s(t);
|
|
41
41
|
}, [t, s]), g = [
|
|
42
42
|
"artifactuse-card",
|
|
43
43
|
a && "artifactuse-card--active",
|
|
@@ -91,7 +91,7 @@ function Ge(t) {
|
|
|
91
91
|
function Tt(t) {
|
|
92
92
|
return ["text", "email", "password", "tel", "url", "number", "date", "time", "datetime-local"].includes(t);
|
|
93
93
|
}
|
|
94
|
-
function
|
|
94
|
+
function Mt({
|
|
95
95
|
artifact: t,
|
|
96
96
|
onSubmit: a,
|
|
97
97
|
onCancel: l,
|
|
@@ -110,22 +110,22 @@ function St({
|
|
|
110
110
|
} catch {
|
|
111
111
|
return { title: "Invalid Form", variant: "fields", data: { fields: [] } };
|
|
112
112
|
}
|
|
113
|
-
}, [t.code]), k = t.id || g.id || `form-${Date.now()}`, p = ((le = g.data) == null ? void 0 : le.fields) || [], h = g.title || "Form", H = P(() => p.some((o) => o.type === "buttons"), [p]), U = P(() => g.variant === "buttons" ? p : [], [g.variant, p]), [
|
|
113
|
+
}, [t.code]), k = t.id || g.id || `form-${Date.now()}`, p = ((le = g.data) == null ? void 0 : le.fields) || [], h = g.title || "Form", H = P(() => p.some((o) => o.type === "buttons"), [p]), U = P(() => g.variant === "buttons" ? p : [], [g.variant, p]), [z, L] = b(() => {
|
|
114
114
|
var C;
|
|
115
115
|
const o = {};
|
|
116
116
|
return p.forEach((y) => {
|
|
117
117
|
["buttons", "divider", "heading"].includes(y.type) || (y.defaultValue !== void 0 ? o[y.name] = y.defaultValue : y.type === "checkbox" ? o[y.name] = !1 : o[y.name] = "");
|
|
118
118
|
}), (C = g.data) != null && C.defaults && Object.assign(o, g.data.defaults), o;
|
|
119
119
|
}), [X, Y] = b({}), [j, oe] = b(!1);
|
|
120
|
-
|
|
120
|
+
V(() => {
|
|
121
121
|
T(_);
|
|
122
|
-
}, [_]),
|
|
122
|
+
}, [_]), V(() => {
|
|
123
123
|
var C;
|
|
124
124
|
const o = {};
|
|
125
125
|
p.forEach((y) => {
|
|
126
126
|
["buttons", "divider", "heading"].includes(y.type) || (y.defaultValue !== void 0 ? o[y.name] = y.defaultValue : y.type === "checkbox" ? o[y.name] = !1 : o[y.name] = "");
|
|
127
127
|
}), (C = g.data) != null && C.defaults && Object.assign(o, g.data.defaults), L(o), Y({});
|
|
128
|
-
}, [t.code]),
|
|
128
|
+
}, [t.code]), V(() => {
|
|
129
129
|
if (i.current && (i.current.setAttribute("data-artifactuse-theme", E), f)) {
|
|
130
130
|
const o = Pt(f);
|
|
131
131
|
o && i.current.style.setProperty("--artifactuse-primary", o);
|
|
@@ -143,7 +143,7 @@ function St({
|
|
|
143
143
|
const o = {};
|
|
144
144
|
p.forEach((N) => {
|
|
145
145
|
if (["buttons", "divider", "heading"].includes(N.type)) return;
|
|
146
|
-
const A =
|
|
146
|
+
const A = z[N.name];
|
|
147
147
|
if (N.required && !A && A !== 0 && A !== !1) {
|
|
148
148
|
o[N.name] = `${N.label || "This field"} is required`;
|
|
149
149
|
return;
|
|
@@ -168,10 +168,10 @@ function St({
|
|
|
168
168
|
const C = (y = g.data) == null ? void 0 : y.validation;
|
|
169
169
|
return C && Object.entries(C).forEach(([N, A]) => {
|
|
170
170
|
if (o[N]) return;
|
|
171
|
-
const D =
|
|
171
|
+
const D = z[N];
|
|
172
172
|
A.pattern && D && (new RegExp(A.pattern).test(D) || (o[N] = A.message || `${N} is invalid`));
|
|
173
173
|
}), Y(o), Object.keys(o).length === 0;
|
|
174
|
-
}, [p,
|
|
174
|
+
}, [p, z, (G = g.data) == null ? void 0 : G.validation]), Z = u(() => {
|
|
175
175
|
var C;
|
|
176
176
|
const o = {};
|
|
177
177
|
p.forEach((y) => {
|
|
@@ -181,12 +181,12 @@ function St({
|
|
|
181
181
|
o == null || o.preventDefault(), se() && (oe(!0), a == null || a({
|
|
182
182
|
formId: k,
|
|
183
183
|
action: "submit",
|
|
184
|
-
values: { ...
|
|
184
|
+
values: { ...z },
|
|
185
185
|
timestamp: Date.now()
|
|
186
186
|
}), setTimeout(() => {
|
|
187
187
|
oe(!1), re("submitted");
|
|
188
188
|
}, 300));
|
|
189
|
-
}, [k,
|
|
189
|
+
}, [k, z, a, se, re]), Q = u((o) => {
|
|
190
190
|
const C = o.action || "custom";
|
|
191
191
|
switch (C) {
|
|
192
192
|
case "submit":
|
|
@@ -217,14 +217,14 @@ function St({
|
|
|
217
217
|
action: C,
|
|
218
218
|
buttonName: o.name || o.label,
|
|
219
219
|
buttonLabel: o.label,
|
|
220
|
-
values: { ...
|
|
220
|
+
values: { ...z },
|
|
221
221
|
timestamp: Date.now()
|
|
222
222
|
}), setTimeout(() => {
|
|
223
223
|
re("submitted");
|
|
224
224
|
}, 150);
|
|
225
225
|
break;
|
|
226
226
|
}
|
|
227
|
-
}, [k,
|
|
227
|
+
}, [k, z, ne, l, n, s, Z, re]);
|
|
228
228
|
return x ? /* @__PURE__ */ e.createElement(
|
|
229
229
|
"div",
|
|
230
230
|
{
|
|
@@ -262,12 +262,12 @@ function St({
|
|
|
262
262
|
},
|
|
263
263
|
(g.title || g.description) && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-header" }, g.title && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-title" }, g.title), g.description && /* @__PURE__ */ e.createElement("p", { className: "artifactuse-form-description" }, g.description)),
|
|
264
264
|
/* @__PURE__ */ e.createElement("form", { onSubmit: ne, className: "artifactuse-form" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-fields" }, p.map((o, C) => /* @__PURE__ */ e.createElement(
|
|
265
|
-
|
|
265
|
+
St,
|
|
266
266
|
{
|
|
267
267
|
key: o.name || C,
|
|
268
268
|
field: o,
|
|
269
269
|
formId: k,
|
|
270
|
-
value:
|
|
270
|
+
value: z[o.name],
|
|
271
271
|
error: X[o.name],
|
|
272
272
|
isSubmitting: j,
|
|
273
273
|
onChange: (y) => ye(o.name, y),
|
|
@@ -293,7 +293,7 @@ function St({
|
|
|
293
293
|
)))
|
|
294
294
|
);
|
|
295
295
|
}
|
|
296
|
-
function
|
|
296
|
+
function St({ field: t, formId: a, value: l, error: n, isSubmitting: s, onChange: r, onButtonAction: E }) {
|
|
297
297
|
const f = `${a}-${t.name}`;
|
|
298
298
|
if (t.type === "buttons")
|
|
299
299
|
return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-buttons" }, (t.fields || []).map((i, w) => /* @__PURE__ */ e.createElement(
|
|
@@ -391,7 +391,7 @@ function Mt({ field: t, formId: a, value: l, error: n, isSubmitting: s, onChange
|
|
|
391
391
|
);
|
|
392
392
|
return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-field" }, /* @__PURE__ */ e.createElement("label", { htmlFor: f, className: "artifactuse-label" }, 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));
|
|
393
393
|
}
|
|
394
|
-
const
|
|
394
|
+
const R = '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>', $t = {
|
|
395
395
|
twitter: 280,
|
|
396
396
|
linkedin: 3e3,
|
|
397
397
|
instagram: 2200,
|
|
@@ -420,33 +420,33 @@ const V = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0
|
|
|
420
420
|
}, et = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
421
421
|
var E, f, _;
|
|
422
422
|
const s = a.media || [], r = 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 ||
|
|
423
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || R, alt: t.name, className: "artifactuse-social-avatar", onError: (i) => i.target.src = R }), /* @__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(Ae, { 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: he(a.text) } }), s.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, /* @__PURE__ */ e.createElement("div", { className: `artifactuse-social-media-grid ${s.length === 1 ? "artifactuse-social-media-single" : ""}`, "data-count": s.length }, s.slice(0, 4).map((i, w) => /* @__PURE__ */ e.createElement("img", { key: w, src: i.url, alt: i.alt || "", onError: (T) => T.target.style.display = "none" })))), a.link && !s.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: (i) => i.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 || Ze(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((i, w) => {
|
|
424
424
|
var T, x;
|
|
425
425
|
return /* @__PURE__ */ e.createElement("div", { key: w, className: "artifactuse-social-poll-option" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll-bar", style: { width: `${((T = a.poll.votes) == null ? void 0 : T[w]) || 0}%` } }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll-label" }, /* @__PURE__ */ e.createElement("span", null, i), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-poll-percent" }, ((x = a.poll.votes) == null ? void 0 : x[w]) || 0, "%")));
|
|
426
|
-
}), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll-meta" }, B(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: ((E = a.quote.author) == null ? void 0 : E.avatar) ||
|
|
426
|
+
}), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll-meta" }, B(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: ((E = a.quote.author) == null ? void 0 : E.avatar) || R, className: "artifactuse-social-quote-avatar", alt: "" }), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-quote-author" }, (f = a.quote.author) == null ? void 0 : f.name), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-quote-handle" }, (_ = a.quote.author) == null ? void 0 : _.handle)), /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-quote-text" }, a.quote.text))), r && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, B(l.replies || 0), " replies"), /* @__PURE__ */ e.createElement("span", null, B(l.retweets || 0), " reposts"), /* @__PURE__ */ e.createElement("span", null, B(l.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, B(l.views || 0), " views")));
|
|
427
427
|
}, Ht = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
428
428
|
const s = 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 ||
|
|
429
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || R, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = R }), /* @__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: he(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: (r) => r.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 || Ze(a.link.url))))), s && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, B(l.likes || 0), " reactions"), /* @__PURE__ */ e.createElement("span", null, B(l.comments || 0), " comments"), /* @__PURE__ */ e.createElement("span", null, B(l.shares || l.reposts || 0), " reposts")));
|
|
430
430
|
}, It = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
431
431
|
const s = 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 ||
|
|
432
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || R, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = R }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.verified && /* @__PURE__ */ e.createElement(Ae, { type: "blue" })), n.location && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-location" }, n.location))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, s[0] ? /* @__PURE__ */ e.createElement("img", { src: s[0].url, alt: s[0].alt || "", onError: (r) => r.target.style.display = "none" }) : /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media-placeholder" })), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-likes" }, B(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: he(a.text) } })), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-timestamp" }, n.timestamp || "JUST NOW"));
|
|
433
433
|
}, Bt = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
434
434
|
const s = a.media || [], r = P(() => {
|
|
435
435
|
const f = l.reactions || {};
|
|
436
436
|
return Object.values(f).reduce((_, i) => _ + (i || 0), 0) || l.likes || 0;
|
|
437
437
|
}, [l]), E = l.likes || l.comments || l.shares || r;
|
|
438
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar ||
|
|
438
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || R, alt: t.name, className: "artifactuse-social-avatar", onError: (f) => f.target.src = R }), /* @__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: he(a.text) } }), s.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media-grid", "data-count": s.length }, s.slice(0, 4).map((f, _) => /* @__PURE__ */ e.createElement("img", { key: _, src: f.url, alt: f.alt || "", onError: (i) => i.target.style.display = "none" })))), a.link && !s.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: (f) => f.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 || Ze(a.link.url)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-title" }, a.link.title)))), E && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, "👍❤️ ", B(r)), /* @__PURE__ */ e.createElement("span", null, B(l.comments || 0), " comments · ", B(l.shares || 0), " shares")));
|
|
439
439
|
}, Ft = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
440
440
|
const s = 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 ||
|
|
441
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || R, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = R }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.verified && /* @__PURE__ */ e.createElement(Ae, { 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: he(a.text) } })), s && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, B(l.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, B(l.replies || 0), " replies"), /* @__PURE__ */ e.createElement("span", null, B(l.reposts || 0), " reposts")));
|
|
442
442
|
}, Wt = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
443
443
|
const s = a.media || [], r = l.likes || l.comments || l.shares;
|
|
444
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, s[0] ? /* @__PURE__ */ e.createElement("img", { src: s[0].url, alt: "Video thumbnail", onError: (E) => E.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 ||
|
|
445
|
-
},
|
|
444
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, s[0] ? /* @__PURE__ */ e.createElement("img", { src: s[0].url, alt: "Video thumbnail", onError: (E) => E.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 || R, alt: t.name, className: "artifactuse-social-avatar", onError: (E) => E.target.src = R }), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-author-name" }, "@", t.name), t.verified && /* @__PURE__ */ e.createElement(Ae, { type: "blue" })), /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: he(a.text) } }), a.sound && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-sound" }, "🎵 ", a.sound)), r && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, B(l.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, B(l.comments || 0), " comments"), /* @__PURE__ */ e.createElement("span", null, B(l.shares || 0), " shares")));
|
|
445
|
+
}, Vt = ({ author: t, content: a, engagement: l, meta: n }) => {
|
|
446
446
|
const s = a.media || [];
|
|
447
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, s[0] ? /* @__PURE__ */ e.createElement("img", { src: s[0].url, alt: "Video thumbnail", onError: (r) => r.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 ||
|
|
447
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, s[0] ? /* @__PURE__ */ e.createElement("img", { src: s[0].url, alt: "Video thumbnail", onError: (r) => r.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 || R, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = R }), /* @__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" }, B(l.views || 0), " views · ", n.timestamp || "Just now"))));
|
|
448
448
|
};
|
|
449
|
-
function
|
|
449
|
+
function zt({ artifact: t, theme: a = "dark", onCopy: l }) {
|
|
450
450
|
const [n, s] = b("Copy"), r = P(() => {
|
|
451
451
|
try {
|
|
452
452
|
return JSON.parse(t.code);
|
|
@@ -474,14 +474,14 @@ function qt({ artifact: t, theme: a = "dark", onCopy: l }) {
|
|
|
474
474
|
case "tiktok":
|
|
475
475
|
return /* @__PURE__ */ e.createElement(Wt, { ...h });
|
|
476
476
|
case "youtube":
|
|
477
|
-
return /* @__PURE__ */ e.createElement(
|
|
477
|
+
return /* @__PURE__ */ e.createElement(Vt, { ...h });
|
|
478
478
|
default:
|
|
479
479
|
return /* @__PURE__ */ e.createElement(et, { ...h });
|
|
480
480
|
}
|
|
481
481
|
};
|
|
482
482
|
return /* @__PURE__ */ e.createElement("div", { className: `artifactuse-social artifactuse-social-${E}`, "data-artifactuse-theme": a }, p(), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-actions-bar" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-platform-badge" }, /* @__PURE__ */ e.createElement("span", null, At[E] || E)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-actions-right" }, /* @__PURE__ */ e.createElement("span", { className: `artifactuse-social-char-counter ${g}` }, d, "/", x), /* @__PURE__ */ e.createElement("button", { className: "artifactuse-social-copy-btn", onClick: k }, n))));
|
|
483
483
|
}
|
|
484
|
-
function
|
|
484
|
+
function qt({
|
|
485
485
|
isOpen: t = !1,
|
|
486
486
|
type: a = "image",
|
|
487
487
|
src: l = "",
|
|
@@ -491,12 +491,12 @@ function Rt({
|
|
|
491
491
|
className: E = ""
|
|
492
492
|
}) {
|
|
493
493
|
const f = F(null), [_, i] = b(!1), [w, T] = b(!1);
|
|
494
|
-
|
|
494
|
+
V(() => (T(!0), () => T(!1)), []), V(() => {
|
|
495
495
|
var p;
|
|
496
496
|
return t ? (document.body.style.overflow = "hidden", (p = f.current) == null || p.focus()) : (document.body.style.overflow = "", i(!1)), () => {
|
|
497
497
|
document.body.style.overflow = "";
|
|
498
498
|
};
|
|
499
|
-
}, [t]),
|
|
499
|
+
}, [t]), V(() => {
|
|
500
500
|
function p(h) {
|
|
501
501
|
h.key === "Escape" && t && r && r();
|
|
502
502
|
}
|
|
@@ -565,7 +565,7 @@ function Rt({
|
|
|
565
565
|
);
|
|
566
566
|
return Ct(k, document.body);
|
|
567
567
|
}
|
|
568
|
-
function
|
|
568
|
+
function Rt(t) {
|
|
569
569
|
if (!t) return null;
|
|
570
570
|
try {
|
|
571
571
|
const a = decodeURIComponent(escape(atob(t)));
|
|
@@ -590,7 +590,7 @@ function Dt(t) {
|
|
|
590
590
|
const f = t.slice(n, s.index);
|
|
591
591
|
f.trim() && a.push({ type: "html", content: f });
|
|
592
592
|
}
|
|
593
|
-
const r =
|
|
593
|
+
const r = Rt(s[3]), E = s[2];
|
|
594
594
|
r && (E === "form" && r.isInline ? a.push({ type: "form", artifact: r }) : E === "social" ? a.push({ type: "social", artifact: r }) : a.push({ type: "panel", artifact: r })), n = s.index + s[0].length;
|
|
595
595
|
}
|
|
596
596
|
if (n < t.length) {
|
|
@@ -626,8 +626,8 @@ function jt({
|
|
|
626
626
|
state: h,
|
|
627
627
|
getTheme: H,
|
|
628
628
|
instance: U
|
|
629
|
-
} = ge(),
|
|
630
|
-
|
|
629
|
+
} = ge(), z = F(null), L = F(null), X = F(null), Y = F(n), [j, oe] = b(""), [re, ye] = b([]), [se, Z] = b(!1), [ne, Q] = b(!1), [le, G] = b("image"), [W, o] = b(""), [C, y] = b(""), [N, A] = b(""), D = P(() => typeof H == "function" ? H() : "dark", [H]), _e = (h == null ? void 0 : h.activeArtifactId) || null, Ne = P(() => Dt(j), [j]), pe = P(() => se || s ? "active" : "inactive", [se, s]);
|
|
630
|
+
V(() => {
|
|
631
631
|
n && Z(!0);
|
|
632
632
|
}, [n]);
|
|
633
633
|
const ee = u((v) => {
|
|
@@ -648,7 +648,7 @@ function jt({
|
|
|
648
648
|
}), L.current.querySelectorAll(".artifactuse-image-container img").forEach((m) => {
|
|
649
649
|
m._lightboxHandler || (m._lightboxHandler = (I) => {
|
|
650
650
|
I.preventDefault(), I.stopPropagation();
|
|
651
|
-
const
|
|
651
|
+
const q = m.closest(".artifactuse-image-container"), O = q == null ? void 0 : q.querySelector(".artifactuse-image-caption"), ve = (O == null ? void 0 : O.textContent) || m.dataset.caption || m.alt || "";
|
|
652
652
|
ee({
|
|
653
653
|
type: "image",
|
|
654
654
|
src: m.src,
|
|
@@ -659,7 +659,7 @@ function jt({
|
|
|
659
659
|
}), L.current.querySelectorAll(".artifactuse-gallery-item img, .artifactuse-image-gallery img").forEach((m) => {
|
|
660
660
|
m._lightboxHandler || (m._lightboxHandler = (I) => {
|
|
661
661
|
I.preventDefault(), I.stopPropagation();
|
|
662
|
-
const
|
|
662
|
+
const q = m.closest(".artifactuse-gallery-item"), O = q == null ? void 0 : q.querySelector(".artifactuse-gallery-caption"), ve = (O == null ? void 0 : O.textContent) || m.dataset.caption || m.alt || "";
|
|
663
663
|
ee({
|
|
664
664
|
type: "image",
|
|
665
665
|
src: m.src,
|
|
@@ -677,9 +677,9 @@ function jt({
|
|
|
677
677
|
});
|
|
678
678
|
}, m.addEventListener("click", m._pdfHandler);
|
|
679
679
|
}), L.current.querySelectorAll(".artifactuse-pdf-container, [data-pdf-viewer]").forEach((m) => {
|
|
680
|
-
var
|
|
680
|
+
var q;
|
|
681
681
|
m._pdfHandler && m.removeEventListener("click", m._pdfHandler);
|
|
682
|
-
const I = m.dataset.pdfSrc || ((
|
|
682
|
+
const I = m.dataset.pdfSrc || ((q = m.querySelector("iframe")) == null ? void 0 : q.src) || "";
|
|
683
683
|
I && (m._pdfHandler = (O) => {
|
|
684
684
|
O.preventDefault(), O.stopPropagation(), ee({
|
|
685
685
|
type: "pdf",
|
|
@@ -691,20 +691,20 @@ function jt({
|
|
|
691
691
|
}), L.current.querySelectorAll(".artifactuse-video-preview-wrapper, .video-preview-wrapper").forEach((m) => {
|
|
692
692
|
m._clickHandler && m.removeEventListener("click", m._clickHandler), m._clickHandler = (I) => {
|
|
693
693
|
if (I.target.closest(".artifactuse-video-play-button")) return;
|
|
694
|
-
const
|
|
695
|
-
|
|
694
|
+
const q = m.dataset.videoUrl || m.dataset.url;
|
|
695
|
+
q && window.open(q, "_blank", "noopener,noreferrer");
|
|
696
696
|
}, m.addEventListener("click", m._clickHandler);
|
|
697
697
|
});
|
|
698
698
|
}, [ee]), Ee = u(() => {
|
|
699
699
|
if (!L.current) return;
|
|
700
|
-
L.current.querySelectorAll("img").forEach((
|
|
701
|
-
|
|
702
|
-
}), L.current.querySelectorAll('a[href$=".pdf"], a[data-type="pdf"]').forEach((
|
|
703
|
-
|
|
704
|
-
}), L.current.querySelectorAll(".artifactuse-pdf-container, [data-pdf-viewer]").forEach((
|
|
705
|
-
|
|
706
|
-
}), L.current.querySelectorAll(".artifactuse-video-preview-wrapper, .video-preview-wrapper").forEach((
|
|
707
|
-
|
|
700
|
+
L.current.querySelectorAll("img").forEach((M) => {
|
|
701
|
+
M._lightboxHandler && (M.removeEventListener("click", M._lightboxHandler), delete M._lightboxHandler);
|
|
702
|
+
}), L.current.querySelectorAll('a[href$=".pdf"], a[data-type="pdf"]').forEach((M) => {
|
|
703
|
+
M._pdfHandler && (M.removeEventListener("click", M._pdfHandler), delete M._pdfHandler);
|
|
704
|
+
}), L.current.querySelectorAll(".artifactuse-pdf-container, [data-pdf-viewer]").forEach((M) => {
|
|
705
|
+
M._pdfHandler && (M.removeEventListener("click", M._pdfHandler), delete M._pdfHandler);
|
|
706
|
+
}), L.current.querySelectorAll(".artifactuse-video-preview-wrapper, .video-preview-wrapper").forEach((M) => {
|
|
707
|
+
M._clickHandler && (M.removeEventListener("click", M._clickHandler), delete M._clickHandler);
|
|
708
708
|
});
|
|
709
709
|
}, []), me = u(() => {
|
|
710
710
|
X.current && clearTimeout(X.current), X.current = setTimeout(async () => {
|
|
@@ -717,14 +717,14 @@ function jt({
|
|
|
717
717
|
Ce();
|
|
718
718
|
}, 100);
|
|
719
719
|
}, [U, Ce]);
|
|
720
|
-
|
|
720
|
+
V(() => {
|
|
721
721
|
if (t) {
|
|
722
722
|
const v = k(t, a);
|
|
723
723
|
oe(v.html), ye(v.artifacts), v.artifacts.length > 0 && r && r(v.artifacts), n || me();
|
|
724
724
|
}
|
|
725
|
-
}, [t, a, k, n, me, r]),
|
|
725
|
+
}, [t, a, k, n, me, r]), V(() => {
|
|
726
726
|
Y.current === !0 && n === !1 && me(), Y.current = n;
|
|
727
|
-
}, [n, me]),
|
|
727
|
+
}, [n, me]), V(() => (n && Z(!0), n || me(), () => {
|
|
728
728
|
X.current && clearTimeout(X.current), Ee();
|
|
729
729
|
}), []);
|
|
730
730
|
const ue = u((v) => {
|
|
@@ -753,7 +753,7 @@ function jt({
|
|
|
753
753
|
);
|
|
754
754
|
case "form":
|
|
755
755
|
return v.artifact.isInline ? /* @__PURE__ */ e.createElement(
|
|
756
|
-
|
|
756
|
+
Mt,
|
|
757
757
|
{
|
|
758
758
|
key: `form-${v.artifact.id}`,
|
|
759
759
|
artifact: v.artifact,
|
|
@@ -766,7 +766,7 @@ function jt({
|
|
|
766
766
|
) : null;
|
|
767
767
|
case "social":
|
|
768
768
|
return /* @__PURE__ */ e.createElement(
|
|
769
|
-
|
|
769
|
+
zt,
|
|
770
770
|
{
|
|
771
771
|
key: `social-${v.artifact.id}`,
|
|
772
772
|
artifact: v.artifact,
|
|
@@ -793,12 +793,12 @@ function jt({
|
|
|
793
793
|
return /* @__PURE__ */ e.createElement(
|
|
794
794
|
"div",
|
|
795
795
|
{
|
|
796
|
-
ref:
|
|
796
|
+
ref: z,
|
|
797
797
|
className: `artifactuse-agent-message ${g}`.trim()
|
|
798
798
|
},
|
|
799
799
|
/* @__PURE__ */ e.createElement("div", { ref: L, className: "artifactuse-message-content" }, Ne.map(ke)),
|
|
800
800
|
/* @__PURE__ */ e.createElement(
|
|
801
|
-
|
|
801
|
+
qt,
|
|
802
802
|
{
|
|
803
803
|
isOpen: ne,
|
|
804
804
|
type: le,
|
|
@@ -854,22 +854,22 @@ function Gt({
|
|
|
854
854
|
getPanelUrl: T,
|
|
855
855
|
openArtifact: x,
|
|
856
856
|
instance: d
|
|
857
|
-
} = ge(), g = F(null), k = F(null), p = F(null), h = F(null), H = F(null), [U,
|
|
857
|
+
} = ge(), g = F(null), k = F(null), p = F(null), h = F(null), H = F(null), [U, z] = b(!1), [L, X] = b(!1), [Y, j] = b(!0), [oe, re] = b(!1), [ye, se] = b(!1), [Z, ne] = b(!1), [Q, le] = b(!1), [G, W] = b("options"), [o, C] = b(""), [y, N] = b(null), [A, D] = b(""), [_e, Ne] = b(!1), [pe, ee] = b(!1), [ce, Ce] = b(65), [Ee, me] = b(50), ue = F(null), de = F(null), He = F(null), fe = F(null), be = F(null), Le = P(() => r ? $e(r.language) : "", [r]), Ie = P(() => r ? Je(r.language) : "", [r]), ke = P(() => r ? T(r) : null, [r, T]), v = P(() => r ? bt(r.language) : "plaintext", [r]), $ = P(() => s.artifacts.filter((c) => !c.isInline), [s.artifacts]), K = P(() => r ? $.findIndex((c) => c.id === r.id) : -1, [r, $]), we = P(() => {
|
|
858
858
|
var c;
|
|
859
859
|
return ((c = d == null ? void 0 : d.config) == null ? void 0 : c.branding) !== !1;
|
|
860
|
-
}, [d]),
|
|
860
|
+
}, [d]), M = P(() => {
|
|
861
861
|
var c;
|
|
862
862
|
return ((c = d == null ? void 0 : d.share) == null ? void 0 : c.enabled) !== !1;
|
|
863
863
|
}, [d]), Be = P(() => {
|
|
864
864
|
var c;
|
|
865
865
|
return ((c = d == null ? void 0 : d.share) == null ? void 0 : c.isAuthenticated()) || !1;
|
|
866
|
-
}, [d]), m = P(() => r ? ce : Math.min(ce, 30), [r, ce]), I = u((c) => `<svg viewBox="0 0 24 24" fill="currentColor">${Je(c)}</svg>`, []),
|
|
866
|
+
}, [d]), m = P(() => r ? ce : Math.min(ce, 30), [r, ce]), I = u((c) => `<svg viewBox="0 0 24 24" fill="currentColor">${Je(c)}</svg>`, []), q = u(() => {
|
|
867
867
|
se(!1), d.state.clearActiveArtifact();
|
|
868
868
|
}, [d]), O = u(() => {
|
|
869
869
|
if (!h.current || !(r != null && r.code)) return;
|
|
870
870
|
const c = r.code.split(`
|
|
871
|
-
`).length,
|
|
872
|
-
h.current.innerHTML =
|
|
871
|
+
`).length, S = Array.from({ length: c }, (te, J) => `<div>${J + 1}</div>`).join("");
|
|
872
|
+
h.current.innerHTML = S;
|
|
873
873
|
}, [r]), ve = u(() => {
|
|
874
874
|
if (k.current && kt() && (r != null && r.code)) {
|
|
875
875
|
const c = window.Prism.languages[v];
|
|
@@ -882,8 +882,8 @@ function Gt({
|
|
|
882
882
|
}, 0);
|
|
883
883
|
}
|
|
884
884
|
}, [r == null ? void 0 : r.code, v]), st = u(() => {
|
|
885
|
-
var
|
|
886
|
-
const c = (
|
|
885
|
+
var S;
|
|
886
|
+
const c = (S = k.current) == null ? void 0 : S.closest("pre");
|
|
887
887
|
if (c && H.current && h.current) {
|
|
888
888
|
const J = window.getComputedStyle(c).backgroundColor;
|
|
889
889
|
J && J !== "rgba(0, 0, 0, 0)" && J !== "transparent" && (H.current.style.backgroundColor = J, h.current.style.backgroundColor = J);
|
|
@@ -903,28 +903,28 @@ function Gt({
|
|
|
903
903
|
}, []), it = u(async () => {
|
|
904
904
|
if (r)
|
|
905
905
|
try {
|
|
906
|
-
await navigator.clipboard.writeText(r.code),
|
|
906
|
+
await navigator.clipboard.writeText(r.code), z(!0), setTimeout(() => z(!1), 2e3);
|
|
907
907
|
} catch (c) {
|
|
908
908
|
console.error("Failed to copy:", c);
|
|
909
909
|
}
|
|
910
910
|
}, [r]), ot = u(() => {
|
|
911
911
|
if (!r) return;
|
|
912
|
-
const { code: c, language:
|
|
912
|
+
const { code: c, language: S, title: te } = r, J = Xe(S), xe = `${te.toLowerCase().replace(/\s+/g, "-")}.${J}`, Se = new Blob([c], { type: "text/plain" }), ie = URL.createObjectURL(Se), ae = document.createElement("a");
|
|
913
913
|
ae.href = ie, ae.download = xe, document.body.appendChild(ae), ae.click(), document.body.removeChild(ae), URL.revokeObjectURL(ie);
|
|
914
914
|
}, [r]), mt = u(async () => {
|
|
915
915
|
if (!(Z || $.length === 0)) {
|
|
916
916
|
ne(!0);
|
|
917
917
|
try {
|
|
918
|
-
const c = new xt(),
|
|
918
|
+
const c = new xt(), S = /* @__PURE__ */ new Map();
|
|
919
919
|
for (const ae of $) {
|
|
920
920
|
if (!ae.code) continue;
|
|
921
921
|
const De = Xe(ae.language);
|
|
922
922
|
let Ue = (ae.title || "untitled").toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-_]/g, ""), je = `${Ue}.${De}`;
|
|
923
|
-
const Oe =
|
|
924
|
-
Oe > 0 && (je = `${Ue}-${Oe}.${De}`),
|
|
923
|
+
const Oe = S.get(je) || 0;
|
|
924
|
+
Oe > 0 && (je = `${Ue}-${Oe}.${De}`), S.set(`${Ue}.${De}`, Oe + 1), c.file(je, ae.code);
|
|
925
925
|
}
|
|
926
|
-
const te = await c.generateAsync({ type: "blob" }), xe = `artifacts-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.zip`,
|
|
927
|
-
ie.href =
|
|
926
|
+
const te = await c.generateAsync({ type: "blob" }), xe = `artifacts-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.zip`, Se = URL.createObjectURL(te), ie = document.createElement("a");
|
|
927
|
+
ie.href = Se, ie.download = xe, document.body.appendChild(ie), ie.click(), document.body.removeChild(ie), URL.revokeObjectURL(Se);
|
|
928
928
|
} catch (c) {
|
|
929
929
|
console.error("Failed to create ZIP:", c);
|
|
930
930
|
} finally {
|
|
@@ -985,51 +985,51 @@ function Gt({
|
|
|
985
985
|
K < $.length - 1 && x($[K + 1]);
|
|
986
986
|
}, [K, x, $]), Qe = u((c) => {
|
|
987
987
|
se(!0), x(c), X(!1);
|
|
988
|
-
}, [x]),
|
|
988
|
+
}, [x]), Ve = u((c) => {
|
|
989
989
|
ue.current = {
|
|
990
990
|
startX: c.clientX,
|
|
991
991
|
startWidth: ce
|
|
992
|
-
}, document.addEventListener("mousemove",
|
|
993
|
-
|
|
992
|
+
}, document.addEventListener("mousemove", ze), document.addEventListener("mouseup", Te), document.body.style.cursor = "ew-resize", document.body.style.userSelect = "none", document.querySelectorAll("iframe").forEach((S) => {
|
|
993
|
+
S.style.pointerEvents = "none";
|
|
994
994
|
});
|
|
995
|
-
}, [ce]),
|
|
995
|
+
}, [ce]), ze = u((c) => {
|
|
996
996
|
if (!ue.current) return;
|
|
997
|
-
const
|
|
997
|
+
const S = window.innerWidth, J = (ue.current.startX - c.clientX) / S * 100, xe = ue.current.startWidth + J;
|
|
998
998
|
Ce(Math.min(Math.max(xe, 25), 75));
|
|
999
999
|
}, []), Te = u(() => {
|
|
1000
|
-
ue.current = null, document.removeEventListener("mousemove",
|
|
1000
|
+
ue.current = null, document.removeEventListener("mousemove", ze), document.removeEventListener("mouseup", Te), document.body.style.cursor = "", document.body.style.userSelect = "", document.querySelectorAll("iframe").forEach((c) => {
|
|
1001
1001
|
c.style.pointerEvents = "";
|
|
1002
1002
|
});
|
|
1003
|
-
}, [
|
|
1003
|
+
}, [ze]), gt = u((c) => {
|
|
1004
1004
|
if (!p.current) return;
|
|
1005
|
-
const
|
|
1005
|
+
const S = p.current.getBoundingClientRect();
|
|
1006
1006
|
de.current = {
|
|
1007
1007
|
startX: c.clientX,
|
|
1008
1008
|
startPosition: Ee,
|
|
1009
|
-
contentLeft:
|
|
1010
|
-
contentWidth:
|
|
1011
|
-
}, document.addEventListener("mousemove",
|
|
1009
|
+
contentLeft: S.left,
|
|
1010
|
+
contentWidth: S.width
|
|
1011
|
+
}, document.addEventListener("mousemove", qe), document.addEventListener("mouseup", Me), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.querySelectorAll("iframe").forEach((te) => {
|
|
1012
1012
|
te.style.pointerEvents = "none";
|
|
1013
1013
|
});
|
|
1014
|
-
}, [Ee]),
|
|
1014
|
+
}, [Ee]), qe = u((c) => {
|
|
1015
1015
|
if (!de.current) return;
|
|
1016
1016
|
const te = (c.clientX - de.current.contentLeft) / de.current.contentWidth * 100;
|
|
1017
1017
|
me(Math.min(Math.max(te, 20), 80));
|
|
1018
|
-
}, []),
|
|
1019
|
-
de.current = null, document.removeEventListener("mousemove",
|
|
1018
|
+
}, []), Me = u(() => {
|
|
1019
|
+
de.current = null, document.removeEventListener("mousemove", qe), document.removeEventListener("mouseup", Me), document.body.style.cursor = "", document.body.style.userSelect = "", document.querySelectorAll("iframe").forEach((c) => {
|
|
1020
1020
|
c.style.pointerEvents = "";
|
|
1021
1021
|
});
|
|
1022
|
-
}, [
|
|
1023
|
-
if (
|
|
1022
|
+
}, [qe]);
|
|
1023
|
+
if (V(() => {
|
|
1024
1024
|
r && (be.current && be.current.isPreviewable !== r.isPreviewable && (re(!0), setTimeout(() => re(!1), 150)), be.current = r, Ke(), j(!0), ct(), Fe());
|
|
1025
|
-
}, [r == null ? void 0 : r.id, Ke]),
|
|
1025
|
+
}, [r == null ? void 0 : r.id, Ke]), V(() => {
|
|
1026
1026
|
(s.viewMode === "code" || s.viewMode === "split") && Fe();
|
|
1027
|
-
}, [s.viewMode, Fe]),
|
|
1027
|
+
}, [s.viewMode, Fe]), V(() => (t && d.on("ai:request", t), a && d.on("save:request", a), l && d.on("export:complete", l), () => {
|
|
1028
1028
|
t && d.off("ai:request", t), a && d.off("save:request", a), l && d.off("export:complete", l);
|
|
1029
|
-
}), [d, t, a, l]),
|
|
1030
|
-
Te(),
|
|
1031
|
-
}, [Te,
|
|
1032
|
-
const
|
|
1029
|
+
}), [d, t, a, l]), V(() => () => {
|
|
1030
|
+
Te(), Me(), clearTimeout(He.current), clearTimeout(fe.current);
|
|
1031
|
+
}, [Te, Me]), !s.isPanelOpen) return null;
|
|
1032
|
+
const Re = [
|
|
1033
1033
|
"artifactuse-panel",
|
|
1034
1034
|
s.isFullscreen && "artifactuse-panel--fullscreen",
|
|
1035
1035
|
!r && f && "artifactuse-panel--list",
|
|
@@ -1043,14 +1043,14 @@ function Gt({
|
|
|
1043
1043
|
return f ? r ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
|
|
1044
1044
|
"div",
|
|
1045
1045
|
{
|
|
1046
|
-
className:
|
|
1046
|
+
className: Re,
|
|
1047
1047
|
style: s.isFullscreen ? void 0 : { width: `${ce}%` }
|
|
1048
1048
|
},
|
|
1049
1049
|
!s.isFullscreen && /* @__PURE__ */ e.createElement(
|
|
1050
1050
|
"div",
|
|
1051
1051
|
{
|
|
1052
1052
|
className: "artifactuse-panel__resize-handle",
|
|
1053
|
-
onMouseDown:
|
|
1053
|
+
onMouseDown: Ve
|
|
1054
1054
|
},
|
|
1055
1055
|
/* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle-line" })
|
|
1056
1056
|
),
|
|
@@ -1059,7 +1059,7 @@ function Gt({
|
|
|
1059
1059
|
{
|
|
1060
1060
|
className: "artifactuse-panel__back",
|
|
1061
1061
|
title: "Back to list",
|
|
1062
|
-
onClick:
|
|
1062
|
+
onClick: q
|
|
1063
1063
|
},
|
|
1064
1064
|
/* @__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" }))
|
|
1065
1065
|
), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__title" }, /* @__PURE__ */ e.createElement(
|
|
@@ -1181,7 +1181,7 @@ function Gt({
|
|
|
1181
1181
|
onClick: ot
|
|
1182
1182
|
},
|
|
1183
1183
|
/* @__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" }))
|
|
1184
|
-
),
|
|
1184
|
+
), M && /* @__PURE__ */ e.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ e.createElement(
|
|
1185
1185
|
"button",
|
|
1186
1186
|
{
|
|
1187
1187
|
className: "artifactuse-panel__footer-action",
|
|
@@ -1205,7 +1205,7 @@ function Gt({
|
|
|
1205
1205
|
onClick: Et
|
|
1206
1206
|
},
|
|
1207
1207
|
_e ? "Copied!" : "Copy"
|
|
1208
|
-
)), y && !pe && /* @__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(y))), !pe && /* @__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: Ye }, "Save to account")))))), $.length > 1 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__nav" }, /* @__PURE__ */ e.createElement(
|
|
1208
|
+
)), y && !pe && /* @__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(y))), !pe && /* @__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: Ye }, "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"))))), $.length > 1 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__nav" }, /* @__PURE__ */ e.createElement(
|
|
1209
1209
|
"button",
|
|
1210
1210
|
{
|
|
1211
1211
|
className: "artifactuse-panel__nav-btn",
|
|
@@ -1238,7 +1238,7 @@ function Gt({
|
|
|
1238
1238
|
onClick: () => X(!1)
|
|
1239
1239
|
},
|
|
1240
1240
|
/* @__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" }))
|
|
1241
|
-
)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__artifact-list-items" }, $.map((c,
|
|
1241
|
+
)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__artifact-list-items" }, $.map((c, S) => /* @__PURE__ */ e.createElement(
|
|
1242
1242
|
"button",
|
|
1243
1243
|
{
|
|
1244
1244
|
key: c.id,
|
|
@@ -1253,9 +1253,9 @@ function Gt({
|
|
|
1253
1253
|
}
|
|
1254
1254
|
),
|
|
1255
1255
|
/* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__artifact-item-content" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-title" }, c.title || "Untitled"), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-meta" }, $e(c.language), c.lineCount && ` • ${c.lineCount} lines`)),
|
|
1256
|
-
/* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-index" },
|
|
1256
|
+
/* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-index" }, S + 1)
|
|
1257
1257
|
)))))))
|
|
1258
|
-
)) : /* @__PURE__ */ e.createElement("div", { className:
|
|
1258
|
+
)) : /* @__PURE__ */ e.createElement("div", { className: Re, style: s.isFullscreen ? void 0 : { width: `${m}%` } }, !s.isFullscreen && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle", onMouseDown: Ve }, /* @__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" }, $.length, " available"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__actions" }, /* @__PURE__ */ e.createElement(
|
|
1259
1259
|
"button",
|
|
1260
1260
|
{
|
|
1261
1261
|
className: `artifactuse-panel__action ${Z ? "artifactuse-panel__action--loading" : ""}`,
|
|
@@ -1272,7 +1272,7 @@ function Gt({
|
|
|
1272
1272
|
onClick: _
|
|
1273
1273
|
},
|
|
1274
1274
|
/* @__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" }))
|
|
1275
|
-
))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__list" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__list-items" }, $.map((c,
|
|
1275
|
+
))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__list" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__list-items" }, $.map((c, S) => /* @__PURE__ */ e.createElement(
|
|
1276
1276
|
"button",
|
|
1277
1277
|
{
|
|
1278
1278
|
key: c.id,
|
|
@@ -1298,7 +1298,7 @@ function Gt({
|
|
|
1298
1298
|
},
|
|
1299
1299
|
/* @__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" })),
|
|
1300
1300
|
/* @__PURE__ */ e.createElement("span", null, "Artifactuse")
|
|
1301
|
-
))) : /* @__PURE__ */ e.createElement("div", { className:
|
|
1301
|
+
))) : /* @__PURE__ */ e.createElement("div", { className: Re, style: s.isFullscreen ? void 0 : { width: `${m}%` } }, !s.isFullscreen && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle", onMouseDown: Ve }, /* @__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(
|
|
1302
1302
|
"button",
|
|
1303
1303
|
{
|
|
1304
1304
|
className: "artifactuse-panel__action artifactuse-panel__action--close",
|
|
@@ -1347,7 +1347,7 @@ function Ot({ children: t, config: a = {} }) {
|
|
|
1347
1347
|
viewMode: "preview",
|
|
1348
1348
|
isFullscreen: !1
|
|
1349
1349
|
}), [E, f] = b(() => n.getPanelTypes());
|
|
1350
|
-
|
|
1350
|
+
V(() => {
|
|
1351
1351
|
const p = n.state.subscribe((h) => {
|
|
1352
1352
|
r({
|
|
1353
1353
|
artifacts: h.artifacts,
|
|
@@ -1422,7 +1422,7 @@ function ge() {
|
|
|
1422
1422
|
}
|
|
1423
1423
|
function Jt(t, a) {
|
|
1424
1424
|
const { on: l, off: n } = ge();
|
|
1425
|
-
|
|
1425
|
+
V(() => {
|
|
1426
1426
|
const s = l(t, a);
|
|
1427
1427
|
return () => {
|
|
1428
1428
|
typeof s == "function" ? s() : n(t, a);
|
|
@@ -1459,12 +1459,12 @@ const ta = {
|
|
|
1459
1459
|
export {
|
|
1460
1460
|
jt as ArtifactuseAgentMessage,
|
|
1461
1461
|
Lt as ArtifactuseCard,
|
|
1462
|
-
|
|
1462
|
+
Mt as ArtifactuseInlineForm,
|
|
1463
1463
|
Gt as ArtifactusePanel,
|
|
1464
1464
|
ea as ArtifactusePanelToggle,
|
|
1465
1465
|
Ot as ArtifactuseProvider,
|
|
1466
|
-
|
|
1467
|
-
|
|
1466
|
+
zt as ArtifactuseSocialPreview,
|
|
1467
|
+
qt as ArtifactuseViewer,
|
|
1468
1468
|
at as DEFAULT_PANELS,
|
|
1469
1469
|
ta as default,
|
|
1470
1470
|
ge as useArtifactuse,
|