artifactuse 0.1.28 → 0.1.30

package/dist/vue/index.js

@@ -1,5 +1,5 @@
-import { ref as M, computed as b, createElementBlock as s, openBlock as a, normalizeClass as J, createElementVNode as e, toDisplayString as o, withModifiers as ye, onMounted as xe, watch as pe, Fragment as F, createCommentVNode as d, renderList as de, createTextVNode as G, h as le, normalizeStyle as Ae, createStaticVNode as Bt, createBlock as be, resolveDynamicComponent as Et, nextTick as Ce, onUnmounted as De, Teleport as zt, createVNode as Be, Transition as Pe, withCtx as He, withKeys as It, onBeforeUnmount as Ft, unref as k, withDirectives as et, vShow as tt, reactive as st, provide as Vt, inject as Rt } from "vue";
-import { g as Se, f as it, a as Oe, b as Ue, n as qt, i as at, c as Ot, D as Ut, d as lt } from "../index-D56xsAnF.js";
+import { ref as M, computed as b, createElementBlock as s, openBlock as a, normalizeClass as J, createElementVNode as e, toDisplayString as o, withModifiers as ye, onMounted as xe, watch as pe, Fragment as V, createCommentVNode as d, renderList as de, createTextVNode as G, h as le, normalizeStyle as Ae, createStaticVNode as Bt, createBlock as be, resolveDynamicComponent as Et, nextTick as Ce, onUnmounted as De, Teleport as zt, createVNode as Be, Transition as Pe, withCtx as He, withKeys as It, onBeforeUnmount as Ft, unref as k, withDirectives as et, vShow as tt, reactive as st, provide as Vt, inject as Rt } from "vue";
+import { g as Se, f as it, a as Oe, b as Ue, n as qt, i as at, c as Ot, D as Ut, d as lt } from "../index-BH35XKmt.js";
 import { J as Dt } from "../jszip.min-CdmYyw5L.js";
 const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class: "artifactuse-card__content" }, Xt = { class: "artifactuse-card__title" }, Zt = { class: "artifactuse-card__meta" }, Wt = { class: "artifactuse-card__type" }, Kt = { class: "artifactuse-card__size" }, Yt = { class: "artifactuse-card__actions" }, Qt = ["title"], Gt = {
   key: 0,
@@ -45,8 +45,8 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
     }
     function y() {
       var I;
-      const x = new Blob([h.artifact.code], { type: "text/plain" }), $ = URL.createObjectURL(x), V = document.createElement("a"), R = Ue(h.artifact.language), X = ((I = h.artifact.title) == null ? void 0 : I.replace(/[^a-z0-9]/gi, "_").toLowerCase()) || "code";
-      V.href = $, V.download = `${X}.${R}`, document.body.appendChild(V), V.click(), document.body.removeChild(V), URL.revokeObjectURL($), m("download", h.artifact);
+      const x = new Blob([h.artifact.code], { type: "text/plain" }), $ = URL.createObjectURL(x), R = document.createElement("a"), q = Ue(h.artifact.language), X = ((I = h.artifact.title) == null ? void 0 : I.replace(/[^a-z0-9]/gi, "_").toLowerCase()) || "code";
+      R.href = $, R.download = `${X}.${q}`, document.body.appendChild(R), R.click(), document.body.removeChild(R), URL.revokeObjectURL($), m("download", h.artifact);
     }
     return (x, $) => (a(), s("div", {
       class: J(["artifactuse-card", { "artifactuse-card--active": A.isActive }]),
@@ -231,7 +231,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
       } catch {
         return { title: "Invalid Form", variant: "fields", data: { fields: [] } };
       }
-    }), n = M(null), y = b(() => h.artifact.id || w.value.id || `form-${Date.now()}`), x = b(() => `artifactuse-form-${w.value.variant || "fields"}`), $ = b(() => w.value.title || "Form"), V = M({}), R = M({}), X = M(!1), I = b(() => {
+    }), n = M(null), y = b(() => h.artifact.id || w.value.id || `form-${Date.now()}`), x = b(() => `artifactuse-form-${w.value.variant || "fields"}`), $ = b(() => w.value.title || "Form"), R = M({}), q = M({}), X = M(!1), I = b(() => {
       var p;
       return ((p = w.value.data) == null ? void 0 : p.fields) || [];
     }), te = b(() => {
@@ -269,7 +269,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
       const p = {};
       I.value.forEach((B) => {
         ["buttons", "divider", "heading"].includes(B.type) || (B.defaultValue !== void 0 ? p[B.name] = B.defaultValue : B.type === "checkbox" ? p[B.name] = !1 : p[B.name] = "");
-      }), (r = w.value.data) != null && r.defaults && Object.assign(p, w.value.data.defaults), V.value = p;
+      }), (r = w.value.data) != null && r.defaults && Object.assign(p, w.value.data.defaults), R.value = p;
     }
     W(), pe(() => h.artifact.code, W);
     function ve(p) {
@@ -279,14 +279,14 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
       return p ? p.map((T) => typeof T == "string" ? { label: T, value: T } : T) : [];
     }
     function _(p, T) {
-      V.value[p] = T, R.value[p] && delete R.value[p];
+      R.value[p] = T, q.value[p] && delete q.value[p];
     }
     function ie() {
       var B;
       const p = {};
       I.value.forEach((c) => {
         if (["buttons", "divider", "heading"].includes(c.type)) return;
-        const S = V.value[c.name];
+        const S = R.value[c.name];
         if (c.required && !S && S !== 0 && S !== !1) {
           p[c.name] = `${c.label || "This field"} is required`;
           return;
@@ -311,18 +311,18 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
       const r = (B = w.value.data) == null ? void 0 : B.validation;
       return r && Object.entries(r).forEach(([c, S]) => {
         if (p[c]) return;
-        const ne = V.value[c];
+        const ne = R.value[c];
         S.pattern && ne && (new RegExp(S.pattern).test(ne) || (p[c] = S.message || `${c} is invalid`));
-      }), R.value = p, Object.keys(p).length === 0;
+      }), q.value = p, Object.keys(p).length === 0;
     }
     function H() {
-      W(), R.value = {};
+      W(), q.value = {};
     }
     function K() {
       ie() && (X.value = !0, m("submit", {
         formId: y.value,
         action: "submit",
-        values: { ...V.value },
+        values: { ...R.value },
         timestamp: Date.now()
       }), setTimeout(() => {
         X.value = !1, L("submitted");
@@ -359,7 +359,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
             action: T,
             buttonName: p.name || p.label,
             buttonLabel: p.label,
-            values: { ...V.value },
+            values: { ...R.value },
             timestamp: Date.now()
           }), setTimeout(() => {
             L("submitted");
@@ -404,13 +404,13 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
           ])]))
         ]),
         e("span", ra, o($.value), 1)
-      ])) : (a(), s(F, { key: 1 }, [
+      ])) : (a(), s(V, { key: 1 }, [
         w.value.title || w.value.description ? (a(), s("div", ca, [
           w.value.title ? (a(), s("div", ua, o(w.value.title), 1)) : d("", !0),
           w.value.description ? (a(), s("p", da, o(w.value.description), 1)) : d("", !0)
         ])) : d("", !0),
         w.value.variant === "buttons" ? (a(), s("div", va, [
-          (a(!0), s(F, null, de(te.value, (r) => (a(), s("button", {
+          (a(!0), s(V, null, de(te.value, (r) => (a(), s("button", {
             key: r.name || r.label,
             type: "button",
             class: J(["artifactuse-form-btn", `artifactuse-form-btn-${r.variant || "secondary"}`]),
@@ -430,11 +430,11 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
           onSubmit: ye(K, ["prevent"])
         }, [
           e("div", _a, [
-            (a(!0), s(F, null, de(I.value, (r, B) => (a(), s(F, {
+            (a(!0), s(V, null, de(I.value, (r, B) => (a(), s(V, {
               key: r.name || B
             }, [
               r.type === "buttons" ? (a(), s("div", ha, [
-                (a(!0), s(F, null, de(r.fields || [], (c) => (a(), s("button", {
+                (a(!0), s(V, null, de(r.fields || [], (c) => (a(), s("button", {
                   key: c.name || c.label,
                   type: c.action === "submit" ? "submit" : "button",
                   class: J(["artifactuse-form-btn", `artifactuse-form-btn-${c.variant || "secondary"}`]),
@@ -452,7 +452,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                 e("label", ba, [
                   e("input", {
                     type: "checkbox",
-                    checked: V.value[r.name],
+                    checked: R.value[r.name],
                     disabled: r.disabled,
                     class: "artifactuse-checkbox",
                     onChange: (c) => _(r.name, c.target.checked)
@@ -463,7 +463,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                   ])
                 ]),
                 r.helpText ? (a(), s("span", La, o(r.helpText), 1)) : d("", !0),
-                R.value[r.name] ? (a(), s("span", Ta, o(R.value[r.name]), 1)) : d("", !0)
+                q.value[r.name] ? (a(), s("span", Ta, o(q.value[r.name]), 1)) : d("", !0)
               ])) : (a(), s("div", Aa, [
                 e("label", {
                   for: `${y.value}-${r.name}`,
@@ -476,7 +476,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                   key: 0,
                   id: `${y.value}-${r.name}`,
                   type: r.type,
-                  value: V.value[r.name],
+                  value: R.value[r.name],
                   placeholder: r.placeholder,
                   disabled: r.disabled,
                   required: r.required,
@@ -485,7 +485,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                 }, null, 40, Sa)) : r.type === "textarea" ? (a(), s("textarea", {
                   key: 1,
                   id: `${y.value}-${r.name}`,
-                  value: V.value[r.name],
+                  value: R.value[r.name],
                   placeholder: r.placeholder,
                   disabled: r.disabled,
                   required: r.required,
@@ -495,20 +495,20 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                 }, null, 40, Ba)) : r.type === "select" ? (a(), s("select", {
                   key: 2,
                   id: `${y.value}-${r.name}`,
-                  value: V.value[r.name],
+                  value: R.value[r.name],
                   disabled: r.disabled,
                   required: r.required,
                   class: "artifactuse-select",
                   onChange: (c) => _(r.name, c.target.value)
                 }, [
                   e("option", za, o(r.placeholder || "Select..."), 1),
-                  (a(!0), s(F, null, de(f(r.options), (c) => (a(), s("option", {
+                  (a(!0), s(V, null, de(f(r.options), (c) => (a(), s("option", {
                     key: c.value,
                     value: c.value,
                     disabled: c.disabled
                   }, o(c.label), 9, Ia))), 128))
                 ], 40, Ea)) : r.type === "radio" ? (a(), s("div", Fa, [
-                  (a(!0), s(F, null, de(f(r.options), (c) => (a(), s("label", {
+                  (a(!0), s(V, null, de(f(r.options), (c) => (a(), s("label", {
                     key: c.value,
                     class: "artifactuse-radio-label"
                   }, [
@@ -516,7 +516,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                       type: "radio",
                       name: r.name,
                       value: c.value,
-                      checked: V.value[r.name] === c.value,
+                      checked: R.value[r.name] === c.value,
                       disabled: c.disabled || r.disabled,
                       class: "artifactuse-radio",
                       onChange: (S) => _(r.name, c.value)
@@ -525,7 +525,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                   ]))), 128))
                 ])) : d("", !0),
                 r.helpText ? (a(), s("span", Ra, o(r.helpText), 1)) : d("", !0),
-                R.value[r.name] ? (a(), s("span", qa, o(R.value[r.name]), 1)) : d("", !0)
+                q.value[r.name] ? (a(), s("span", qa, o(q.value[r.name]), 1)) : d("", !0)
               ]))
             ], 64))), 128))
           ]),
@@ -655,7 +655,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
     }), $ = b(() => {
       const f = y.value;
       return f.likes || f.comments || f.shares || f.retweets || f.replies || f.views;
-    }), V = b(() => `artifactuse-social-verified-${w.value.verifiedType || "blue"}`), R = b(() => ({
+    }), R = b(() => `artifactuse-social-verified-${w.value.verifiedType || "blue"}`), q = b(() => ({
       twitter: "X",
       linkedin: "LinkedIn",
       instagram: "Instagram",
@@ -730,7 +730,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
         class: J(["artifactuse-social", [`artifactuse-social-${L.value}`]]),
         "data-artifactuse-theme": A.theme
       }, [
-        L.value === "twitter" ? (a(), s(F, { key: 0 }, [
+        L.value === "twitter" ? (a(), s(V, { key: 0 }, [
           e("div", Ja, [
             e("img", {
               src: w.value.avatar || _e,
@@ -743,7 +743,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                 e("span", null, o(w.value.name), 1),
                 w.value.verified ? (a(), s("svg", {
                   key: 0,
-                  class: J(["artifactuse-social-verified", V.value]),
+                  class: J(["artifactuse-social-verified", R.value]),
                   viewBox: "0 0 24 24",
                   fill: "currentColor"
                 }, [..._[0] || (_[0] = [
@@ -766,7 +766,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                 class: J(["artifactuse-social-media-grid", { "artifactuse-social-media-single": n.value.media.length === 1 }]),
                 "data-count": n.value.media.length
               }, [
-                (a(!0), s(F, null, de(n.value.media.slice(0, 4), (r, B) => (a(), s("img", {
+                (a(!0), s(V, null, de(n.value.media.slice(0, 4), (r, B) => (a(), s("img", {
                   key: B,
                   src: r.url,
                   alt: r.alt || "",
@@ -803,7 +803,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
               ])
             ])) : d("", !0),
             n.value.poll ? (a(), s("div", us, [
-              (a(!0), s(F, null, de(n.value.poll.options, (r, B) => {
+              (a(!0), s(V, null, de(n.value.poll.options, (r, B) => {
                 var c, S;
                 return a(), s("div", {
                   key: B,
@@ -879,7 +879,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
               e("span", null, o(z(y.value.views || 0)), 1)
             ])
           ])) : d("", !0)
-        ], 64)) : L.value === "linkedin" ? (a(), s(F, { key: 1 }, [
+        ], 64)) : L.value === "linkedin" ? (a(), s(V, { key: 1 }, [
           e("div", $s, [
             e("img", {
               src: w.value.avatar || _e,
@@ -934,7 +934,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
             ]),
             e("span", null, o(z(y.value.comments || 0)) + " comments · " + o(z(y.value.shares || 0)) + " shares", 1)
           ])) : d("", !0)
-        ], 64)) : L.value === "instagram" ? (a(), s(F, { key: 2 }, [
+        ], 64)) : L.value === "instagram" ? (a(), s(V, { key: 2 }, [
           e("div", Os, [
             e("img", {
               src: w.value.avatar || _e,
@@ -966,7 +966,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
             }, null, 8, Ks)
           ]),
           e("div", Ys, o(x.value.timestamp || "Just now"), 1)
-        ], 64)) : L.value === "facebook" ? (a(), s(F, { key: 3 }, [
+        ], 64)) : L.value === "facebook" ? (a(), s(V, { key: 3 }, [
           e("div", Qs, [
             e("img", {
               src: w.value.avatar || _e,
@@ -1018,7 +1018,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
             ]),
             e("span", pi, o(z(y.value.comments || 0)) + " comments · " + o(z(y.value.shares || 0)) + " shares", 1)
           ])) : d("", !0)
-        ], 64)) : L.value === "threads" ? (a(), s(F, { key: 4 }, [
+        ], 64)) : L.value === "threads" ? (a(), s(V, { key: 4 }, [
           e("div", _i, [
             e("img", {
               src: w.value.avatar || _e,
@@ -1077,7 +1077,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
               e("span", null, o(z(y.value.shares || 0)), 1)
             ])
           ])) : d("", !0)
-        ], 64)) : L.value === "tiktok" ? (a(), s(F, { key: 5 }, [
+        ], 64)) : L.value === "tiktok" ? (a(), s(V, { key: 5 }, [
           e("div", Li, [
             n.value.thumbnail ? (a(), s("img", {
               key: 0,
@@ -1126,7 +1126,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
               e("span", null, o(z(y.value.shares || 0)) + " shares", 1)
             ])) : d("", !0)
           ])
-        ], 64)) : L.value === "youtube" ? (a(), s(F, { key: 6 }, [
+        ], 64)) : L.value === "youtube" ? (a(), s(V, { key: 6 }, [
           e("div", Fi, [
             n.value.thumbnail ? (a(), s("img", {
               key: 0,
@@ -1153,7 +1153,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
         e("div", Ni, [
           e("div", Ji, [
             (a(), be(Et(X.value))),
-            e("span", null, o(R.value), 1)
+            e("span", null, o(q.value), 1)
           ]),
           e("button", {
             class: "artifactuse-social-copy-btn",
@@ -1454,8 +1454,8 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
       state: L,
       getTheme: w,
       instance: n
-    } = Ee(), y = M(null), x = M(null), $ = M(""), V = M([]);
-    let R = null;
+    } = Ee(), y = M(null), x = M(null), $ = M(""), R = M([]);
+    let q = null;
     const X = M(!1), I = M("image"), te = M(""), z = M(""), ae = M(""), Z = b(() => (w == null ? void 0 : w()) || "dark"), W = b(() => L.activeArtifactId), ve = b(() => {
       var C;
       return m.inlineCards ?? ((C = n == null ? void 0 : n.config) == null ? void 0 : C.inlineCards) ?? !0;
@@ -1469,8 +1469,8 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
     function ie(C) {
       if (!C) return null;
       try {
-        const q = decodeURIComponent(escape(atob(C)));
-        return JSON.parse(q);
+        const F = decodeURIComponent(escape(atob(C)));
+        return JSON.parse(F);
       } catch {
         try {
           const D = C.replace(/
/g, `
@@ -1482,23 +1482,23 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
       }
     }
     const H = b(() => {
-      const C = [], q = $.value;
-      if (!q) return C;
+      const C = [], F = $.value;
+      if (!F) return C;
       const D = /<div\s+class="artifactuse-placeholder[^"]*"[^>]*data-artifact-id="([^"]+)"[^>]*data-artifact-type="([^"]+)"[^>]*data-artifact=["']([^"']*)["'][^>]*><\/div>/gi;
       let Y = 0, P;
-      for (; (P = D.exec(q)) !== null; ) {
+      for (; (P = D.exec(F)) !== null; ) {
         if (P.index > Y) {
-          const j = q.slice(Y, P.index);
+          const j = F.slice(Y, P.index);
           j.trim() && C.push({ type: "html", content: j });
         }
         const N = ie(P[3]), v = P[2];
         N && (v === "form" && N.isInline ? C.push({ type: "form", artifact: N }) : v === "social" ? C.push({ type: "social", artifact: N }) : C.push({ type: "panel", artifact: N })), Y = P.index + P[0].length;
       }
-      if (Y < q.length) {
-        const N = q.slice(Y);
+      if (Y < F.length) {
+        const N = F.slice(Y);
         N.trim() && C.push({ type: "html", content: N });
       }
-      return C.length === 0 && q.trim() && C.push({ type: "html", content: q }), C;
+      return C.length === 0 && F.trim() && C.push({ type: "html", content: F }), C;
     });
     function K(C) {
       I.value = C.type || "image", te.value = C.src || "", z.value = C.alt || "", ae.value = C.caption || "", X.value = !0, l("media-open", C);
@@ -1581,7 +1581,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
       });
     }
     function r() {
-      R && clearTimeout(R), R = setTimeout(async () => {
+      q && clearTimeout(q), q = setTimeout(async () => {
         if (await Ce(), n != null && n.initializeContent && x.value)
           try {
             await n.initializeContent(x.value);
@@ -1595,30 +1595,31 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
       () => m.content,
       (C) => {
         if (C) {
-          const q = U(C, m.messageId, {
+          const F = U(C, m.messageId, {
             inlinePreview: m.inlinePreview,
             inlineCode: m.inlineCode,
             tabs: m.tabs,
             viewMode: m.viewMode
           });
-          $.value = q.html, V.value = q.artifacts, q.artifacts.length > 0 && l("artifact-detected", q.artifacts), m.typing || r();
+          $.value = F.html, R.value = F.artifacts, F.artifacts.length > 0 && l("artifact-detected", F.artifacts), m.typing || r();
         }
       },
       { immediate: !0 }
     ), pe(
       () => m.typing,
-      (C, q) => {
-        q === !0 && C === !1 && r();
+      (C, F) => {
+        F === !0 && C === !1 && r();
       }
     ), xe(() => {
       m.typing || r();
     }), Ft(() => {
-      R && clearTimeout(R), T();
+      q && clearTimeout(q), T();
     });
     function B(C) {
-      const q = C.target.closest(".artifactuse-inline-preview");
-      if (q) {
-        const D = q.dataset.artifactId;
+      const F = C.target.closest(".artifactuse-inline-preview");
+      if (F) {
+        if (F.dataset.nonClickable) return;
+        const D = F.dataset.artifactId;
         if (D) {
           const Y = L.artifacts.find((P) => P.id === D);
           Y && c(Y);
@@ -1650,7 +1651,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
       openViewer: K,
       closeViewer: ee,
       attachMediaListeners: p
-    }), (C, q) => (a(), s("div", {
+    }), (C, F) => (a(), s("div", {
       class: "artifactuse-agent-message",
       ref_key: "messageRef",
       ref: y
@@ -1661,7 +1662,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
         ref: x,
         onClick: B
       }, [
-        (a(!0), s(F, null, de(H.value, (D, Y) => (a(), s(F, { key: Y }, [
+        (a(!0), s(V, null, de(H.value, (D, Y) => (a(), s(V, { key: Y }, [
           D.type === "html" ? (a(), s("div", {
             key: 0,
             innerHTML: D.content
@@ -1816,12 +1817,12 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
       getPanelUrl: y,
       openArtifact: x,
       instance: $
-    } = Ee(), V = M(null), R = M(null), X = M(null), I = M(null), te = M(null), z = M(null), ae = M(!1), Z = M(!1), W = M(!0), ve = M(!1), f = M(!1), _ = M(!1), ie = M(!1), H = M("options"), K = M(""), ee = M(null), p = M(""), T = M(!1), r = M(!1), B = M([]), c = M(!1), S = M("");
+    } = Ee(), R = M(null), q = M(null), X = M(null), I = M(null), te = M(null), z = M(null), ae = M(!1), Z = M(!1), W = M(!0), ve = M(!1), f = M(!1), _ = M(!1), ie = M(!1), H = M("options"), K = M(""), ee = M(null), p = M(""), T = M(!1), r = M(!1), B = M([]), c = M(!1), S = M("");
     let ne = null, ue = null, fe = null;
     const Le = b(() => {
       var i;
       return ((i = $.editor) == null ? void 0 : i.isAvailable()) || !1;
-    }), he = M(65), C = M(50), q = b(() => l.value ? Se(l.value.language) : ""), D = b(() => l.value ? `<svg viewBox="0 0 24 24" fill="currentColor">${Oe(l.value.language)}</svg>` : ""), Y = b(() => {
+    }), he = M(65), C = M(50), F = b(() => l.value ? Se(l.value.language) : ""), D = b(() => l.value ? `<svg viewBox="0 0 24 24" fill="currentColor">${Oe(l.value.language)}</svg>` : ""), Y = b(() => {
       if (!l.value) return null;
       let i = y(l.value);
       return i && l.value._refreshToken && (i += (i.includes("?") ? "&" : "?") + "_t=" + l.value._refreshToken), i;
@@ -1869,26 +1870,26 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
     }
     function ut() {
       var i;
-      if (R.value && at() && ((i = l.value) != null && i.code)) {
+      if (q.value && at() && ((i = l.value) != null && i.code)) {
         const t = Ne(l.value);
         if (t)
-          R.value.innerHTML = t.html;
+          q.value.innerHTML = t.html;
         else {
           const g = window.Prism.languages[P.value];
-          g ? R.value.innerHTML = window.Prism.highlight(
+          g ? q.value.innerHTML = window.Prism.highlight(
             l.value.code,
             g,
             P.value
-          ) : R.value.textContent = l.value.code;
+          ) : q.value.textContent = l.value.code;
         }
-        R.value.dataset.highlighted = "true", Ce(() => {
+        q.value.dataset.highlighted = "true", Ce(() => {
           dt();
         });
       }
     }
     function dt() {
       var t;
-      const i = (t = R.value) == null ? void 0 : t.closest("pre");
+      const i = (t = q.value) == null ? void 0 : t.closest("pre");
       if (i && te.value && I.value) {
         const O = window.getComputedStyle(i).backgroundColor;
         O && O !== "rgba(0, 0, 0, 0)" && O !== "transparent" && (te.value.style.backgroundColor = O, I.value.style.backgroundColor = O);
@@ -1922,7 +1923,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
       });
     }
     function pt() {
-      clearTimeout(ue), W.value = !1, V.value && l.value && ($.bridge.setIframe(V.value), $.bridge.loadArtifact(l.value));
+      clearTimeout(ue), W.value = !1, R.value && l.value && ($.bridge.setIframe(R.value), $.bridge.loadArtifact(l.value));
     }
     function _t() {
       clearTimeout(ue), W.value = !1;
@@ -2128,7 +2129,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
       i && (t && t.isPreviewable !== i.isPreviewable && (ve.value = !0, setTimeout(() => {
         ve.value = !1;
       }, 150)), (!t || i.id !== t.id) && (vt(), W.value = !0, ht()), (!t || i.id !== t.id || i.code !== t.code) && (Te(), m.viewMode === "edit" && (!t || i.id !== t.id ? Ce(() => Je()) : fe && fe.setCode(i.code || "")), clearTimeout(ne), ne = setTimeout(() => {
-        V.value && i.isPreviewable && $.bridge.loadArtifact(i);
+        R.value && i.isPreviewable && $.bridge.loadArtifact(i);
       }, 500)));
     }, { deep: !0 }), pe(() => m.viewMode, (i) => {
       (i === "code" || i === "split") && Te(), i === "edit" && Ce(() => Je());
@@ -2156,7 +2157,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
           }, [...t[12] || (t[12] = [
             e("div", { class: "artifactuse-panel__resize-handle-line" }, null, -1)
           ])], 32)),
-          k(E) ? k(l) ? (a(), s(F, { key: 3 }, [
+          k(E) ? k(l) ? (a(), s(V, { key: 3 }, [
             e("header", xl, [
               f.value ? (a(), s("button", {
                 key: 0,
@@ -2181,8 +2182,8 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                 e("div", Ll, [
                   e("span", Tl, o(k(l).title || "Untitled"), 1),
                   e("span", Al, [
-                    G(o(q.value) + " ", 1),
-                    k(l).lineCount ? (a(), s(F, { key: 0 }, [
+                    G(o(F.value) + " ", 1),
+                    k(l).lineCount ? (a(), s(V, { key: 0 }, [
                       G(" • " + o(k(l).lineCount) + " lines ", 1)
                     ], 64)) : d("", !0)
                   ])
@@ -2376,7 +2377,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                 Y.value ? (a(), s("iframe", {
                   key: 1,
                   ref_key: "iframeRef",
-                  ref: V,
+                  ref: R,
                   src: Y.value,
                   class: J(["artifactuse-panel__iframe", { "artifactuse-panel__iframe--loading": W.value }]),
                   sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads allow-top-navigation-by-user-activation",
@@ -2399,7 +2400,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                       y2: "12"
                     })
                   ], -1)),
-                  e("p", null, "Preview not available for " + o(q.value), 1)
+                  e("p", null, "Preview not available for " + o(F.value), 1)
                 ]))
               ], 4)) : d("", !0),
               et(e("div", {
@@ -2429,7 +2430,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                   }, [
                     (a(), s("code", {
                       ref_key: "codeRef",
-                      ref: R,
+                      ref: q,
                       key: k(l).id,
                       class: J(`language-${P.value}`)
                     }, null, 2))
@@ -2669,7 +2670,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                               e("div", { class: "artifactuse-share-popup__spinner" }, null, -1),
                               e("p", { class: "artifactuse-share-popup__loading-text" }, "Loading artifacts...", -1)
                             ])])) : B.value.length === 0 ? (a(), s("div", un, " No saved artifacts of this type ")) : (a(), s("div", dn, [
-                              (a(!0), s(F, null, de(B.value, (g) => {
+                              (a(!0), s(V, null, de(B.value, (g) => {
                                 var O, Q, me;
                                 return a(), s("button", {
                                   key: ((O = g.project) == null ? void 0 : O.uuid) || g.id,
@@ -2877,7 +2878,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                           ])])
                         ]),
                         e("div", Mn, [
-                          (a(!0), s(F, null, de(N.value, (g, O) => (a(), s("button", {
+                          (a(!0), s(V, null, de(N.value, (g, O) => (a(), s("button", {
                             key: g.id,
                             class: J(["artifactuse-panel__artifact-item", { "artifactuse-panel__artifact-item--active": g.id === k(l).id }]),
                             onClick: (Q) => Ke(g)
@@ -2890,7 +2891,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                               e("span", Pn, o(g.title || "Untitled"), 1),
                               e("span", Hn, [
                                 G(o(k(Se)(g.language)) + " ", 1),
-                                g.lineCount ? (a(), s(F, { key: 0 }, [
+                                g.lineCount ? (a(), s(V, { key: 0 }, [
                                   G(" • " + o(g.lineCount) + " lines ", 1)
                                 ], 64)) : d("", !0)
                               ])
@@ -2905,7 +2906,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                 ])) : d("", !0)
               ])
             ])
-          ], 64)) : (a(), s(F, { key: 2 }, [
+          ], 64)) : (a(), s(V, { key: 2 }, [
             e("header", ol, [
               e("div", rl, [
                 t[18] || (t[18] = e("span", { class: "artifactuse-panel__icon" }, [
@@ -2979,7 +2980,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
             ]),
             e("div", _l, [
               e("div", hl, [
-                (a(!0), s(F, null, de(N.value, (g, O) => (a(), s("button", {
+                (a(!0), s(V, null, de(N.value, (g, O) => (a(), s("button", {
                   key: g.id,
                   class: "artifactuse-panel__list-item",
                   onClick: (Q) => Ke(g)
@@ -2992,7 +2993,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                     e("span", kl, o(g.title || "Untitled"), 1),
                     e("span", wl, [
                       G(o(k(Se)(g.language)) + " ", 1),
-                      g.lineCount ? (a(), s(F, { key: 0 }, [
+                      g.lineCount ? (a(), s(V, { key: 0 }, [
                         G(" • " + o(g.lineCount) + " lines ", 1)
                       ], 64)) : d("", !0)
                     ])
@@ -3031,7 +3032,7 @@ const jt = { class: "artifactuse-card__icon" }, Nt = ["innerHTML"], Jt = { class
                 e("span", null, "Artifactuse", -1)
               ])])) : d("", !0)
             ])
-          ], 64)) : (a(), s(F, { key: 1 }, [
+          ], 64)) : (a(), s(V, { key: 1 }, [
             e("header", sl, [
               t[14] || (t[14] = e("div", { class: "artifactuse-panel__title" }, [
                 e("span", { class: "artifactuse-panel__icon" }, [