artifactuse 0.1.12 → 0.1.14

package/dist/react/index.js

@@ -1,31 +1,31 @@
 import e, { useState as C, useMemo as $, useCallback as d, useRef as W, useEffect as q, createContext as Ke, useContext as Ye } from "react";
-import { g as xe, f as Oe, a as ze, b as Re, n as Ge, i as Qe, D as Je, c as et } from "../index-BhIYi_WM.js";
+import { g as Ce, f as Oe, a as ze, b as Re, n as Ge, i as Qe, D as Je, c as et } from "../index-BhIYi_WM.js";
 import { J as tt } from "../jszip.min-CdmYyw5L.js";
 import { createPortal as at } from "react-dom";
 function rt({
   artifact: t,
   isActive: a = !1,
-  onOpen: s,
-  onCopy: l,
+  onOpen: l,
+  onCopy: s,
   onDownload: n,
   className: r = ""
 }) {
-  const [p, u] = C(!1), y = $(() => xe(t.language), [t.language]), c = $(() => {
-    var w;
-    return Oe(t.size || ((w = t.code) == null ? void 0 : w.length) || 0);
-  }, [t.size, t.code]), b = $(() => ze(t.language), [t.language]), P = d((w) => {
-    w.stopPropagation(), s && s(t);
-  }, [t, s]), x = d(async (w) => {
-    w.stopPropagation();
+  const [p, u] = C(!1), y = $(() => Ce(t.language), [t.language]), c = $(() => {
+    var b;
+    return Oe(t.size || ((b = t.code) == null ? void 0 : b.length) || 0);
+  }, [t.size, t.code]), w = $(() => ze(t.language), [t.language]), P = d((b) => {
+    b.stopPropagation(), l && l(t);
+  }, [t, l]), x = d(async (b) => {
+    b.stopPropagation();
     try {
-      await navigator.clipboard.writeText(t.code), u(!0), l && l(t), setTimeout(() => {
+      await navigator.clipboard.writeText(t.code), u(!0), s && s(t), setTimeout(() => {
         u(!1);
       }, 2e3);
     } catch {
       const E = document.createElement("textarea");
       E.value = t.code, E.style.position = "fixed", E.style.opacity = "0", document.body.appendChild(E), E.select();
       try {
-        document.execCommand("copy"), u(!0), l && l(t), setTimeout(() => {
+        document.execCommand("copy"), u(!0), s && s(t), setTimeout(() => {
           u(!1);
         }, 2e3);
       } catch (I) {
@@ -33,9 +33,9 @@ function rt({
       }
       document.body.removeChild(E);
     }
-  }, [t, l]), N = d((w) => {
+  }, [t, s]), N = d((b) => {
     var L;
-    w.stopPropagation();
+    b.stopPropagation();
     const f = new Blob([t.code], { type: "text/plain" }), E = URL.createObjectURL(f), I = document.createElement("a"), D = Re(t.language), z = ((L = t.title) == null ? void 0 : L.replace(/[^a-z0-9]/gi, "_").toLowerCase()) || "code";
     I.href = E, I.download = `${z}.${D}`, document.body.appendChild(I), I.click(), document.body.removeChild(I), URL.revokeObjectURL(E), n && n(t);
   }, [t, n]), v = [
@@ -50,7 +50,7 @@ function rt({
       fill: "none",
       stroke: "currentColor",
       strokeWidth: "1.5",
-      dangerouslySetInnerHTML: { __html: b }
+      dangerouslySetInnerHTML: { __html: w }
     }
   )), /* @__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" }, y), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-card__separator" }, "•"), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-card__size" }, c))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-card__actions" }, /* @__PURE__ */ e.createElement(
     "button",
@@ -80,10 +80,10 @@ function nt(t) {
       if (!isNaN(r) && !isNaN(p) && !isNaN(u)) return `${r}, ${p}, ${u}`;
     }
   }
-  const s = a.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
-  if (s) return `${s[1]}, ${s[2]}, ${s[3]}`;
-  const l = a.split(/[\s,]+/).map(Number).filter((n) => !isNaN(n));
-  return l.length >= 3 ? `${l[0]}, ${l[1]}, ${l[2]}` : null;
+  const l = a.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+  if (l) return `${l[1]}, ${l[2]}, ${l[3]}`;
+  const s = a.split(/[\s,]+/).map(Number).filter((n) => !isNaN(n));
+  return s.length >= 3 ? `${s[0]}, ${s[1]}, ${s[2]}` : null;
 }
 function Ue(t) {
   return t ? t.map((a) => typeof a == "string" ? { label: a, value: a } : a) : [];
@@ -94,8 +94,8 @@ function st(t) {
 function lt({
   artifact: t,
   onSubmit: a,
-  onCancel: s,
-  onReset: l,
+  onCancel: l,
+  onReset: s,
   onButtonClick: n,
   className: r = "",
   theme: p = "dark",
@@ -103,14 +103,14 @@ function lt({
   initialState: y = "active"
   // 'active' | 'submitted' | 'cancelled' | 'inactive'
 }) {
-  var ce, te, ie;
-  const c = W(null), [b, P] = C(y), x = b !== "active", N = b === "active" ? "" : `artifactuse-form--${b}`, v = $(() => {
+  var ie, te, oe;
+  const c = W(null), [w, P] = C(y), x = w !== "active", N = w === "active" ? "" : `artifactuse-form--${w}`, v = $(() => {
     try {
       return JSON.parse(t.code);
     } catch {
       return { title: "Invalid Form", variant: "fields", data: { fields: [] } };
     }
-  }, [t.code]), w = t.id || v.id || `form-${Date.now()}`, f = ((ce = v.data) == null ? void 0 : ce.fields) || [], E = v.title || "Form", I = $(() => f.some((i) => i.type === "buttons"), [f]), D = $(() => v.variant === "buttons" ? f : [], [v.variant, f]), [z, L] = C(() => {
+  }, [t.code]), b = t.id || v.id || `form-${Date.now()}`, f = ((ie = v.data) == null ? void 0 : ie.fields) || [], E = v.title || "Form", I = $(() => f.some((i) => i.type === "buttons"), [f]), D = $(() => v.variant === "buttons" ? f : [], [v.variant, f]), [z, L] = C(() => {
     var k;
     const i = {};
     return f.forEach((g) => {
@@ -133,7 +133,7 @@ function lt({
   }, [p, u]);
   const ee = d((i) => {
     P(i);
-  }, []), de = d((i, k) => {
+  }, []), fe = d((i, k) => {
     L((g) => ({ ...g, [i]: k })), K((g) => {
       const _ = { ...g };
       return delete _[i], _;
@@ -177,24 +177,24 @@ function lt({
     f.forEach((g) => {
       ["buttons", "divider", "heading"].includes(g.type) || (g.defaultValue !== void 0 ? i[g.name] = g.defaultValue : g.type === "checkbox" ? i[g.name] = !1 : i[g.name] = "");
     }), (k = v.data) != null && k.defaults && Object.assign(i, v.data.defaults), L(i), K({});
-  }, [f, (ie = v.data) == null ? void 0 : ie.defaults]), re = d((i) => {
+  }, [f, (oe = v.data) == null ? void 0 : oe.defaults]), re = d((i) => {
     i == null || i.preventDefault(), ae() && (le(!0), a == null || a({
-      formId: w,
+      formId: b,
       action: "submit",
       values: { ...z },
       timestamp: Date.now()
     }), setTimeout(() => {
       le(!1), ee("submitted");
     }, 300));
-  }, [w, z, a, ae, ee]), j = d((i) => {
+  }, [b, z, a, ae, ee]), j = d((i) => {
     const k = i.action || "custom";
     switch (k) {
       case "submit":
         re();
         break;
       case "cancel":
-        s == null || s({
-          formId: w,
+        l == null || l({
+          formId: b,
           action: "cancel",
           buttonName: i.name || "cancel",
           timestamp: Date.now()
@@ -203,8 +203,8 @@ function lt({
         }, 150);
         break;
       case "reset":
-        X(), l == null || l({
-          formId: w,
+        X(), s == null || s({
+          formId: b,
           action: "reset",
           buttonName: i.name || "reset",
           timestamp: Date.now()
@@ -213,7 +213,7 @@ function lt({
       case "custom":
       default:
         n == null || n({
-          formId: w,
+          formId: b,
           action: k,
           buttonName: i.name || i.label,
           buttonLabel: i.label,
@@ -224,7 +224,7 @@ function lt({
         }, 150);
         break;
     }
-  }, [w, z, re, s, l, n, X, ee]);
+  }, [b, z, re, l, s, n, X, ee]);
   return x ? /* @__PURE__ */ e.createElement(
     "div",
     {
@@ -232,7 +232,7 @@ function lt({
       className: `artifactuse-inline-form artifactuse-form-${v.variant || "fields"} ${N} ${r}`,
       "data-artifactuse-theme": p
     },
-    /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-collapsed" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-collapsed-icon" }, b === "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" })), b === "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" })), b === "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" }, E))
+    /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-collapsed" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-collapsed-icon" }, w === "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" })), w === "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" })), w === "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" }, E))
   ) : v.variant === "buttons" ? /* @__PURE__ */ e.createElement(
     "div",
     {
@@ -266,11 +266,11 @@ function lt({
       {
         key: i.name || k,
         field: i,
-        formId: w,
+        formId: b,
         value: z[i.name],
         error: J[i.name],
         isSubmitting: U,
-        onChange: (g) => de(i.name, g),
+        onChange: (g) => fe(i.name, g),
         onButtonAction: j
       }
     ))), !I && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-buttons artifactuse-form-buttons-default" }, /* @__PURE__ */ e.createElement(
@@ -293,13 +293,13 @@ function lt({
     )))
   );
 }
-function ct({ field: t, formId: a, value: s, error: l, isSubmitting: n, onChange: r, onButtonAction: p }) {
+function ct({ field: t, formId: a, value: l, error: s, isSubmitting: n, onChange: r, onButtonAction: p }) {
   const u = `${a}-${t.name}`;
   if (t.type === "buttons")
-    return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-buttons" }, (t.fields || []).map((c, b) => /* @__PURE__ */ e.createElement(
+    return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-buttons" }, (t.fields || []).map((c, w) => /* @__PURE__ */ e.createElement(
       "button",
       {
-        key: c.name || c.label || b,
+        key: c.name || c.label || w,
         type: c.action === "submit" ? "submit" : "button",
         className: `artifactuse-form-btn artifactuse-form-btn-${c.variant || "secondary"}`,
         onClick: c.action !== "submit" ? () => p(c) : void 0,
@@ -319,12 +319,12 @@ function ct({ field: t, formId: a, value: s, error: l, isSubmitting: n, onChange
         type: "checkbox",
         id: u,
         name: t.name,
-        checked: s || !1,
+        checked: l || !1,
         disabled: t.disabled,
         className: "artifactuse-checkbox",
         onChange: (c) => r(c.target.checked)
       }
-    ), /* @__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), l && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-error-text" }, l));
+    ), /* @__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), s && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-error-text" }, s));
   if (t.type === "radio")
     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" }, Ue(t.options).map((c) => /* @__PURE__ */ e.createElement("label", { key: c.value, className: "artifactuse-radio-label" }, /* @__PURE__ */ e.createElement(
       "input",
@@ -332,19 +332,19 @@ function ct({ field: t, formId: a, value: s, error: l, isSubmitting: n, onChange
         type: "radio",
         name: t.name,
         value: c.value,
-        checked: s === c.value,
+        checked: l === c.value,
         disabled: c.disabled || t.disabled,
         className: "artifactuse-radio",
         onChange: () => r(c.value)
       }
-    ), /* @__PURE__ */ e.createElement("span", null, c.label)))), t.helpText && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-help-text" }, t.helpText), l && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-error-text" }, l));
+    ), /* @__PURE__ */ e.createElement("span", null, c.label)))), t.helpText && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-help-text" }, t.helpText), s && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-error-text" }, s));
   const y = () => st(t.type) ? /* @__PURE__ */ e.createElement(
     "input",
     {
       type: t.type,
       id: u,
       name: t.name,
-      value: s || "",
+      value: l || "",
       placeholder: t.placeholder,
       disabled: t.disabled,
       required: t.required,
@@ -356,7 +356,7 @@ function ct({ field: t, formId: a, value: s, error: l, isSubmitting: n, onChange
     {
       id: u,
       name: t.name,
-      value: s || "",
+      value: l || "",
       placeholder: t.placeholder,
       disabled: t.disabled,
       required: t.required,
@@ -369,7 +369,7 @@ function ct({ field: t, formId: a, value: s, error: l, isSubmitting: n, onChange
     {
       id: u,
       name: t.name,
-      value: s || "",
+      value: l || "",
       disabled: t.disabled,
       required: t.required,
       className: "artifactuse-select",
@@ -383,13 +383,13 @@ function ct({ field: t, formId: a, value: s, error: l, isSubmitting: n, onChange
       type: "text",
       id: u,
       name: t.name,
-      value: s || "",
+      value: l || "",
       disabled: t.disabled,
       className: "artifactuse-input",
       onChange: (c) => r(c.target.value)
     }
   );
-  return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-field" }, /* @__PURE__ */ e.createElement("label", { htmlFor: u, className: "artifactuse-label" }, t.label, t.required && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-required" }, "*")), y(), t.helpText && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-help-text" }, t.helpText), l && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-error-text" }, l));
+  return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-field" }, /* @__PURE__ */ e.createElement("label", { htmlFor: u, className: "artifactuse-label" }, t.label, t.required && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-required" }, "*")), y(), t.helpText && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-help-text" }, t.helpText), s && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-error-text" }, s));
 }
 const V = '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>', it = {
   twitter: 280,
@@ -407,59 +407,59 @@ const V = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0
   threads: "Threads",
   tiktok: "TikTok",
   youtube: "YouTube"
-}, Ce = ({ type: t = "blue" }) => /* @__PURE__ */ e.createElement("svg", { className: `artifactuse-social-verified artifactuse-social-verified-${t}`, viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ e.createElement("path", { d: "M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.34 2.19c-1.39-.46-2.9-.2-3.91.81s-1.27 2.52-.81 3.91C2.63 9.33 1.75 10.57 1.75 12s.88 2.67 2.19 3.34c-.46 1.39-.2 2.9.81 3.91s2.52 1.27 3.91.81c.66 1.31 1.91 2.19 3.34 2.19s2.67-.88 3.34-2.19c1.39.46 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z" })), F = (t) => t ? t >= 1e6 ? `${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${(t / 1e3).toFixed(1)}K` : t.toString() : "0", Ve = (t) => {
+}, Le = ({ type: t = "blue" }) => /* @__PURE__ */ e.createElement("svg", { className: `artifactuse-social-verified artifactuse-social-verified-${t}`, viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ e.createElement("path", { d: "M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.34 2.19c-1.39-.46-2.9-.2-3.91.81s-1.27 2.52-.81 3.91C2.63 9.33 1.75 10.57 1.75 12s.88 2.67 2.19 3.34c-.46 1.39-.2 2.9.81 3.91s2.52 1.27 3.91.81c.66 1.31 1.91 2.19 3.34 2.19s2.67-.88 3.34-2.19c1.39.46 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z" })), F = (t) => t ? t >= 1e6 ? `${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${(t / 1e3).toFixed(1)}K` : t.toString() : "0", Ve = (t) => {
   try {
     return new URL(t).hostname.replace("www.", "");
   } catch {
     return t;
   }
-}, me = (t) => {
+}, ue = (t) => {
   if (!t) return "";
   let a = t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   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;
-}, je = ({ author: t, content: a, engagement: s, meta: l }) => {
+}, je = ({ author: t, content: a, engagement: l, meta: s }) => {
   var p, u, y;
-  const n = a.media || [], r = s.likes || s.retweets || s.replies || s.views;
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || V, alt: t.name, className: "artifactuse-social-avatar", onError: (c) => c.target.src = V }), /* @__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(Ce, { 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" }, "· ", l.timestamp || "Just now")))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: me(a.text) } }), n.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, /* @__PURE__ */ e.createElement("div", { className: `artifactuse-social-media-grid ${n.length === 1 ? "artifactuse-social-media-single" : ""}`, "data-count": n.length }, n.slice(0, 4).map((c, b) => /* @__PURE__ */ e.createElement("img", { key: b, src: c.url, alt: c.alt || "", onError: (P) => P.target.style.display = "none" })))), a.link && !n.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: (c) => c.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 || Ve(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((c, b) => {
+  const n = a.media || [], r = l.likes || l.retweets || l.replies || l.views;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || V, alt: t.name, className: "artifactuse-social-avatar", onError: (c) => c.target.src = V }), /* @__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(Le, { 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" }, "· ", s.timestamp || "Just now")))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: ue(a.text) } }), n.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, /* @__PURE__ */ e.createElement("div", { className: `artifactuse-social-media-grid ${n.length === 1 ? "artifactuse-social-media-single" : ""}`, "data-count": n.length }, n.slice(0, 4).map((c, w) => /* @__PURE__ */ e.createElement("img", { key: w, src: c.url, alt: c.alt || "", onError: (P) => P.target.style.display = "none" })))), a.link && !n.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: (c) => c.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 || Ve(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((c, w) => {
     var P, x;
-    return /* @__PURE__ */ e.createElement("div", { key: b, className: "artifactuse-social-poll-option" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll-bar", style: { width: `${((P = a.poll.votes) == null ? void 0 : P[b]) || 0}%` } }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll-label" }, /* @__PURE__ */ e.createElement("span", null, c), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-poll-percent" }, ((x = a.poll.votes) == null ? void 0 : x[b]) || 0, "%")));
-  }), /* @__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: ((p = a.quote.author) == null ? void 0 : p.avatar) || V, className: "artifactuse-social-quote-avatar", alt: "" }), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-quote-author" }, (u = a.quote.author) == null ? void 0 : u.name), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-quote-handle" }, (y = a.quote.author) == null ? void 0 : y.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, F(s.replies || 0), " replies"), /* @__PURE__ */ e.createElement("span", null, F(s.retweets || 0), " reposts"), /* @__PURE__ */ e.createElement("span", null, F(s.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, F(s.views || 0), " views")));
-}, mt = ({ author: t, content: a, engagement: s, meta: l }) => {
-  const n = s.likes || s.comments || s.shares || s.reposts;
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || V, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = V }), /* @__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" }, l.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: (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 || Ve(a.link.url))))), n && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, F(s.likes || 0), " reactions"), /* @__PURE__ */ e.createElement("span", null, F(s.comments || 0), " comments"), /* @__PURE__ */ e.createElement("span", null, F(s.shares || s.reposts || 0), " reposts")));
-}, ut = ({ author: t, content: a, engagement: s, meta: l }) => {
+    return /* @__PURE__ */ e.createElement("div", { key: w, className: "artifactuse-social-poll-option" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll-bar", style: { width: `${((P = a.poll.votes) == null ? void 0 : P[w]) || 0}%` } }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-poll-label" }, /* @__PURE__ */ e.createElement("span", null, c), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-poll-percent" }, ((x = a.poll.votes) == null ? void 0 : x[w]) || 0, "%")));
+  }), /* @__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: ((p = a.quote.author) == null ? void 0 : p.avatar) || V, className: "artifactuse-social-quote-avatar", alt: "" }), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-quote-author" }, (u = a.quote.author) == null ? void 0 : u.name), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-quote-handle" }, (y = a.quote.author) == null ? void 0 : y.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, 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")));
+}, mt = ({ author: t, content: a, engagement: l, meta: s }) => {
+  const n = l.likes || l.comments || l.shares || l.reposts;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || V, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = V }), /* @__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" }, s.timestamp || "Just now", " · 🌐"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: ue(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 || Ve(a.link.url))))), n && /* @__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")));
+}, ut = ({ author: t, content: a, engagement: l, meta: s }) => {
   const n = a.media || [];
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || V, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = V }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.verified && /* @__PURE__ */ e.createElement(Ce, { type: "blue" })), l.location && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-location" }, l.location))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, n[0] ? /* @__PURE__ */ e.createElement("img", { src: n[0].url, alt: n[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" }, F(s.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: me(a.text) } })), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-timestamp" }, l.timestamp || "JUST NOW"));
-}, dt = ({ author: t, content: a, engagement: s, meta: l }) => {
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || V, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = V }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.verified && /* @__PURE__ */ e.createElement(Le, { type: "blue" })), s.location && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-location" }, s.location))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, n[0] ? /* @__PURE__ */ e.createElement("img", { src: n[0].url, alt: n[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" }, 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: ue(a.text) } })), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-timestamp" }, s.timestamp || "JUST NOW"));
+}, dt = ({ author: t, content: a, engagement: l, meta: s }) => {
   const n = a.media || [], r = $(() => {
-    const u = s.reactions || {};
-    return Object.values(u).reduce((y, c) => y + (c || 0), 0) || s.likes || 0;
-  }, [s]), p = s.likes || s.comments || s.shares || r;
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || V, alt: t.name, className: "artifactuse-social-avatar", onError: (u) => u.target.src = V }), /* @__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" }, l.timestamp || "Just now", " · 🌐"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: me(a.text) } }), n.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media-grid", "data-count": n.length }, n.slice(0, 4).map((u, y) => /* @__PURE__ */ e.createElement("img", { key: y, src: u.url, alt: u.alt || "", onError: (c) => c.target.style.display = "none" })))), a.link && !n.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: (u) => u.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 || Ve(a.link.url)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-title" }, a.link.title)))), p && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, "👍❤️ ", F(r)), /* @__PURE__ */ e.createElement("span", null, F(s.comments || 0), " comments · ", F(s.shares || 0), " shares")));
-}, ft = ({ author: t, content: a, engagement: s, meta: l }) => {
-  const n = s.likes || s.replies || s.reposts;
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || V, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = V }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.verified && /* @__PURE__ */ e.createElement(Ce, { type: "blue" }))), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-timestamp" }, l.timestamp || "Just now")), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: me(a.text) } })), n && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, F(s.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, F(s.replies || 0), " replies"), /* @__PURE__ */ e.createElement("span", null, F(s.reposts || 0), " reposts")));
-}, pt = ({ author: t, content: a, engagement: s, meta: l }) => {
-  const n = a.media || [], r = s.likes || s.comments || s.shares;
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, n[0] ? /* @__PURE__ */ e.createElement("img", { src: n[0].url, alt: "Video thumbnail", onError: (p) => p.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 || V, alt: t.name, className: "artifactuse-social-avatar", onError: (p) => p.target.src = V }), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-author-name" }, "@", t.name), t.verified && /* @__PURE__ */ e.createElement(Ce, { type: "blue" })), /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: me(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, F(s.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, F(s.comments || 0), " comments"), /* @__PURE__ */ e.createElement("span", null, F(s.shares || 0), " shares")));
-}, Et = ({ author: t, content: a, engagement: s, meta: l }) => {
+    const u = l.reactions || {};
+    return Object.values(u).reduce((y, c) => y + (c || 0), 0) || l.likes || 0;
+  }, [l]), p = l.likes || l.comments || l.shares || r;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || V, alt: t.name, className: "artifactuse-social-avatar", onError: (u) => u.target.src = V }), /* @__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" }, s.timestamp || "Just now", " · 🌐"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: ue(a.text) } }), n.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media-grid", "data-count": n.length }, n.slice(0, 4).map((u, y) => /* @__PURE__ */ e.createElement("img", { key: y, src: u.url, alt: u.alt || "", onError: (c) => c.target.style.display = "none" })))), a.link && !n.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: (u) => u.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 || Ve(a.link.url)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-title" }, a.link.title)))), p && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, "👍❤️ ", F(r)), /* @__PURE__ */ e.createElement("span", null, F(l.comments || 0), " comments · ", F(l.shares || 0), " shares")));
+}, ft = ({ author: t, content: a, engagement: l, meta: s }) => {
+  const n = l.likes || l.replies || l.reposts;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || V, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = V }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.verified && /* @__PURE__ */ e.createElement(Le, { type: "blue" }))), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-timestamp" }, s.timestamp || "Just now")), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: ue(a.text) } })), n && /* @__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")));
+}, pt = ({ author: t, content: a, engagement: l, meta: s }) => {
+  const n = a.media || [], r = l.likes || l.comments || l.shares;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, n[0] ? /* @__PURE__ */ e.createElement("img", { src: n[0].url, alt: "Video thumbnail", onError: (p) => p.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 || V, alt: t.name, className: "artifactuse-social-avatar", onError: (p) => p.target.src = V }), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-author-name" }, "@", t.name), t.verified && /* @__PURE__ */ e.createElement(Le, { type: "blue" })), /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: ue(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, 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")));
+}, Et = ({ author: t, content: a, engagement: l, meta: s }) => {
   const n = a.media || [];
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, n[0] ? /* @__PURE__ */ e.createElement("img", { src: n[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 || V, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = V }), /* @__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(s.views || 0), " views · ", l.timestamp || "Just now"))));
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, n[0] ? /* @__PURE__ */ e.createElement("img", { src: n[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 || V, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = V }), /* @__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 · ", s.timestamp || "Just now"))));
 };
-function vt({ artifact: t, theme: a = "dark", onCopy: s }) {
-  const [l, n] = C("Copy"), r = $(() => {
+function vt({ artifact: t, theme: a = "dark", onCopy: l }) {
+  const [s, n] = C("Copy"), r = $(() => {
     try {
       return JSON.parse(t.code);
     } catch {
       return { platform: "twitter", data: {} };
     }
-  }, [t.code]), p = (r == null ? void 0 : r.platform) || "twitter", u = (r == null ? void 0 : r.data) || {}, { author: y = {}, content: c = {}, engagement: b = {}, meta: P = {} } = u, x = it[p] || 280, N = (c.text || "").length, v = N > x ? "error" : N > x * 0.9 ? "warning" : "", w = d(() => {
+  }, [t.code]), p = (r == null ? void 0 : r.platform) || "twitter", u = (r == null ? void 0 : r.data) || {}, { author: y = {}, content: c = {}, engagement: w = {}, meta: P = {} } = u, x = it[p] || 280, N = (c.text || "").length, v = N > x ? "error" : N > x * 0.9 ? "warning" : "", b = d(() => {
     const E = c.text || "";
     navigator.clipboard.writeText(E).then(() => {
-      n("Copied!"), setTimeout(() => n("Copy"), 2e3), s == null || s({ platform: p, text: E });
+      n("Copied!"), setTimeout(() => n("Copy"), 2e3), l == null || l({ platform: p, text: E });
     });
-  }, [c.text, p, s]), f = () => {
-    const E = { author: y, content: c, engagement: b, meta: P };
+  }, [c.text, p, l]), f = () => {
+    const E = { author: y, content: c, engagement: w, meta: P };
     switch (p) {
       case "twitter":
         return /* @__PURE__ */ e.createElement(je, { ...E });
@@ -479,18 +479,18 @@ function vt({ artifact: t, theme: a = "dark", onCopy: s }) {
         return /* @__PURE__ */ e.createElement(je, { ...E });
     }
   };
-  return /* @__PURE__ */ e.createElement("div", { className: `artifactuse-social artifactuse-social-${p}`, "data-artifactuse-theme": a }, f(), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-actions-bar" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-platform-badge" }, /* @__PURE__ */ e.createElement("span", null, ot[p] || p)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-actions-right" }, /* @__PURE__ */ e.createElement("span", { className: `artifactuse-social-char-counter ${v}` }, N, "/", x), /* @__PURE__ */ e.createElement("button", { className: "artifactuse-social-copy-btn", onClick: w }, l))));
+  return /* @__PURE__ */ e.createElement("div", { className: `artifactuse-social artifactuse-social-${p}`, "data-artifactuse-theme": a }, f(), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-actions-bar" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-platform-badge" }, /* @__PURE__ */ e.createElement("span", null, ot[p] || p)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-actions-right" }, /* @__PURE__ */ e.createElement("span", { className: `artifactuse-social-char-counter ${v}` }, N, "/", x), /* @__PURE__ */ e.createElement("button", { className: "artifactuse-social-copy-btn", onClick: b }, s))));
 }
 function ht({
   isOpen: t = !1,
   type: a = "image",
-  src: s = "",
-  alt: l = "",
+  src: l = "",
+  alt: s = "",
   caption: n = "",
   onClose: r,
   className: p = ""
 }) {
-  const u = W(null), [y, c] = C(!1), [b, P] = C(!1);
+  const u = W(null), [y, c] = C(!1), [w, P] = C(!1);
   q(() => (P(!0), () => P(!1)), []), q(() => {
     var f;
     return t ? (document.body.style.overflow = "hidden", (f = u.current) == null || f.focus()) : (document.body.style.overflow = "", c(!1)), () => {
@@ -508,11 +508,11 @@ function ht({
     a === "image" && c((f) => !f);
   }, [a]), v = d(() => {
     const f = document.createElement("a");
-    f.href = s, f.download = l || "download", document.body.appendChild(f), f.click(), document.body.removeChild(f);
-  }, [s, l]);
-  if (!t || !b)
+    f.href = l, f.download = s || "download", document.body.appendChild(f), f.click(), document.body.removeChild(f);
+  }, [l, s]);
+  if (!t || !w)
     return null;
-  const w = /* @__PURE__ */ e.createElement(
+  const b = /* @__PURE__ */ e.createElement(
     "div",
     {
       ref: u,
@@ -525,17 +525,17 @@ function ht({
     /* @__PURE__ */ e.createElement("div", { className: "artifactuse-viewer-content", onClick: (f) => f.stopPropagation() }, a === "image" && /* @__PURE__ */ e.createElement(
       "img",
       {
-        src: s,
-        alt: l,
+        src: l,
+        alt: s,
         className: `artifactuse-viewer-image ${y ? "artifactuse-viewer-image--zoomed" : ""}`,
         onClick: N
       }
     ), a === "pdf" && /* @__PURE__ */ e.createElement(
       "iframe",
       {
-        src: s,
+        src: l,
         className: "artifactuse-viewer-pdf",
-        title: l || "PDF Viewer"
+        title: s || "PDF Viewer"
       }
     ), /* @__PURE__ */ e.createElement(
       "button",
@@ -563,7 +563,7 @@ function ht({
       /* @__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" }))
     )), n && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-viewer-caption" }, n))
   );
-  return at(w, document.body);
+  return at(b, document.body);
 }
 function gt(t) {
   if (!t) return null;
@@ -572,29 +572,29 @@ function gt(t) {
     return JSON.parse(a);
   } catch {
     try {
-      const s = t.replace(/&#10;/g, `
+      const l = t.replace(/&#10;/g, `
 `).replace(/&#13;/g, "\r").replace(/&#9;/g, "	").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
-      return JSON.parse(s);
-    } catch (s) {
-      return console.error("Failed to parse artifact data:", s), null;
+      return JSON.parse(l);
+    } catch (l) {
+      return console.error("Failed to parse artifact data:", l), null;
     }
   }
 }
 function yt(t) {
   const a = [];
   if (!t) return a;
-  const s = /<div\s+class="artifactuse-placeholder[^"]*"[^>]*data-artifact-id="([^"]+)"[^>]*data-artifact-type="([^"]+)"[^>]*data-artifact=["']([^"']*)["'][^>]*><\/div>/gi;
-  let l = 0, n;
-  for (; (n = s.exec(t)) !== null; ) {
-    if (n.index > l) {
-      const u = t.slice(l, n.index);
+  const l = /<div\s+class="artifactuse-placeholder[^"]*"[^>]*data-artifact-id="([^"]+)"[^>]*data-artifact-type="([^"]+)"[^>]*data-artifact=["']([^"']*)["'][^>]*><\/div>/gi;
+  let s = 0, n;
+  for (; (n = l.exec(t)) !== null; ) {
+    if (n.index > s) {
+      const u = t.slice(s, n.index);
       u.trim() && a.push({ type: "html", content: u });
     }
     const r = gt(n[3]), p = n[2];
-    r && (p === "form" && r.isInline ? a.push({ type: "form", artifact: r }) : p === "social" ? a.push({ type: "social", artifact: r }) : a.push({ type: "panel", artifact: r })), l = n.index + n[0].length;
+    r && (p === "form" && r.isInline ? a.push({ type: "form", artifact: r }) : p === "social" ? a.push({ type: "social", artifact: r }) : a.push({ type: "panel", artifact: r })), s = n.index + n[0].length;
   }
-  if (l < t.length) {
-    const r = t.slice(l);
+  if (s < t.length) {
+    const r = t.slice(s);
     r.trim() && a.push({ type: "html", content: r });
   }
   return a.length === 0 && t.trim() && a.push({ type: "html", content: t }), a;
@@ -605,8 +605,8 @@ function _t() {
 function Nt({
   content: t,
   messageId: a = _t(),
-  inlineCards: s = !0,
-  typing: l = !1,
+  inlineCards: l = !0,
+  typing: s = !1,
   isLastMessage: n = !1,
   // Whether this is the last/most recent message
   onArtifactDetected: r,
@@ -614,27 +614,27 @@ function Nt({
   onArtifactCopy: u,
   onArtifactDownload: y,
   onFormSubmit: c,
-  onFormCancel: b,
+  onFormCancel: w,
   onFormButtonClick: P,
   onSocialCopy: x,
   onMediaOpen: N,
   className: v = ""
 }) {
   const {
-    processMessage: w,
+    processMessage: b,
     openArtifact: f,
     state: E,
     getTheme: I,
     instance: D
-  } = ue(), z = W(null), L = W(null), J = W(null), K = W(l), [U, le] = C(""), [ee, de] = C([]), [ae, X] = C(!1), [re, j] = C(!1), [ce, te] = C("image"), [ie, i] = C(""), [k, g] = C(""), [_, M] = C(""), Y = $(() => typeof I == "function" ? I() : "dark", [I]), ge = (E == null ? void 0 : E.activeArtifactId) || null, fe = $(() => yt(U), [U]), Le = $(() => ae || n ? "active" : "inactive", [ae, n]);
+  } = de(), z = W(null), L = W(null), J = W(null), K = W(s), [U, le] = C(""), [ee, fe] = C([]), [ae, X] = C(!1), [re, j] = C(!1), [ie, te] = C("image"), [oe, i] = C(""), [k, g] = C(""), [_, M] = C(""), Y = $(() => typeof I == "function" ? I() : "dark", [I]), ye = (E == null ? void 0 : E.activeArtifactId) || null, pe = $(() => yt(U), [U]), ce = $(() => ae || n ? "active" : "inactive", [ae, n]);
   q(() => {
-    l && X(!0);
-  }, [l]);
+    s && X(!0);
+  }, [s]);
   const T = d((h) => {
     te(h.type || "image"), i(h.src || ""), g(h.alt || ""), M(h.caption || ""), j(!0), N && N(h);
   }, [N]), Z = d(() => {
     j(!1), i(""), g(""), M("");
-  }, []), oe = d(() => {
+  }, []), me = d(() => {
     if (!L.current) return;
     L.current.querySelectorAll('img[data-lightbox="true"]').forEach((o) => {
       o._lightboxHandler && o.removeEventListener("click", o._lightboxHandler), o._lightboxHandler = (S) => {
@@ -648,23 +648,23 @@ function Nt({
     }), L.current.querySelectorAll(".artifactuse-image-container img").forEach((o) => {
       o._lightboxHandler || (o._lightboxHandler = (S) => {
         S.preventDefault(), S.stopPropagation();
-        const B = o.closest(".artifactuse-image-container"), R = B == null ? void 0 : B.querySelector(".artifactuse-image-caption"), ve = (R == null ? void 0 : R.textContent) || o.dataset.caption || o.alt || "";
+        const B = o.closest(".artifactuse-image-container"), R = B == null ? void 0 : B.querySelector(".artifactuse-image-caption"), he = (R == null ? void 0 : R.textContent) || o.dataset.caption || o.alt || "";
         T({
           type: "image",
           src: o.src,
           alt: o.alt || "",
-          caption: ve
+          caption: he
         });
       }, o.addEventListener("click", o._lightboxHandler), o.style.cursor = "zoom-in");
     }), L.current.querySelectorAll(".artifactuse-gallery-item img, .artifactuse-image-gallery img").forEach((o) => {
       o._lightboxHandler || (o._lightboxHandler = (S) => {
         S.preventDefault(), S.stopPropagation();
-        const B = o.closest(".artifactuse-gallery-item"), R = B == null ? void 0 : B.querySelector(".artifactuse-gallery-caption"), ve = (R == null ? void 0 : R.textContent) || o.dataset.caption || o.alt || "";
+        const B = o.closest(".artifactuse-gallery-item"), R = B == null ? void 0 : B.querySelector(".artifactuse-gallery-caption"), he = (R == null ? void 0 : R.textContent) || o.dataset.caption || o.alt || "";
         T({
           type: "image",
           src: o.src,
           alt: o.alt || "",
-          caption: ve
+          caption: he
         });
       }, o.addEventListener("click", o._lightboxHandler), o.style.cursor = "zoom-in");
     }), L.current.querySelectorAll('a[href$=".pdf"], a[data-type="pdf"]').forEach((o) => {
@@ -695,7 +695,7 @@ function Nt({
         B && window.open(B, "_blank", "noopener,noreferrer");
       }, o.addEventListener("click", o._clickHandler);
     });
-  }, [T]), ye = d(() => {
+  }, [T]), _e = d(() => {
     if (!L.current) return;
     L.current.querySelectorAll("img").forEach((H) => {
       H._lightboxHandler && (H.removeEventListener("click", H._lightboxHandler), delete H._lightboxHandler);
@@ -714,40 +714,40 @@ function Nt({
         } catch (h) {
           console.error("Failed to initialize content:", h);
         }
-      oe();
+      me();
     }, 100);
-  }, [D, oe]);
+  }, [D, me]);
   q(() => {
     if (t) {
-      const h = w(t, a);
-      le(h.html), de(h.artifacts), h.artifacts.length > 0 && r && r(h.artifacts), l || ne();
+      const h = b(t, a);
+      le(h.html), fe(h.artifacts), h.artifacts.length > 0 && r && r(h.artifacts), s || ne();
     }
-  }, [t, a, w, l, ne, r]), q(() => {
-    K.current === !0 && l === !1 && ne(), K.current = l;
-  }, [l, ne]), q(() => (l && X(!0), l || ne(), () => {
-    J.current && clearTimeout(J.current), ye();
+  }, [t, a, b, s, ne, r]), q(() => {
+    K.current === !0 && s === !1 && ne(), K.current = s;
+  }, [s, ne]), q(() => (s && X(!0), s || ne(), () => {
+    J.current && clearTimeout(J.current), _e();
   }), []);
   const Pe = d((h) => {
     f(h), p && p(h);
-  }, [f, p]), _e = d((h) => {
+  }, [f, p]), Ne = d((h) => {
     u && u(h);
-  }, [u]), Ne = d((h) => {
+  }, [u]), be = d((h) => {
     y && y(h);
   }, [y]), Te = d((h) => {
     c && c(h);
-  }, [c]), be = d((h) => {
-    b && b(h);
-  }, [b]), pe = d((h) => {
+  }, [c]), we = d((h) => {
+    w && w(h);
+  }, [w]), Ee = d((h) => {
     P && P(h);
   }, [P]), $e = d((h) => {
     x && x(h);
-  }, [x]), Me = (h, Ee) => {
+  }, [x]), Me = (h, ve) => {
     switch (h.type) {
       case "html":
         return /* @__PURE__ */ e.createElement(
           "div",
           {
-            key: `html-${Ee}`,
+            key: `html-${ve}`,
             dangerouslySetInnerHTML: { __html: h.content }
           }
         );
@@ -758,10 +758,10 @@ function Nt({
             key: `form-${h.artifact.id}`,
             artifact: h.artifact,
             theme: Y,
-            initialState: Le,
+            initialState: ce,
             onSubmit: Te,
-            onCancel: be,
-            onButtonClick: pe
+            onCancel: we,
+            onButtonClick: Ee
           }
         ) : null;
       case "social":
@@ -775,15 +775,15 @@ function Nt({
           }
         );
       case "panel":
-        return s ? /* @__PURE__ */ e.createElement(
+        return l ? /* @__PURE__ */ e.createElement(
           rt,
           {
             key: `panel-${h.artifact.id}`,
             artifact: h.artifact,
-            isActive: ge === h.artifact.id,
+            isActive: ye === h.artifact.id,
             onOpen: Pe,
-            onCopy: _e,
-            onDownload: Ne
+            onCopy: Ne,
+            onDownload: be
           }
         ) : null;
       default:
@@ -796,13 +796,13 @@ function Nt({
       ref: z,
       className: `artifactuse-agent-message ${v}`.trim()
     },
-    /* @__PURE__ */ e.createElement("div", { ref: L, className: "artifactuse-message-content" }, fe.map(Me)),
+    /* @__PURE__ */ e.createElement("div", { ref: L, className: "artifactuse-message-content" }, pe.map(Me)),
     /* @__PURE__ */ e.createElement(
       ht,
       {
         isOpen: re,
-        type: ce,
-        src: ie,
+        type: ie,
+        src: oe,
         alt: k,
         caption: _,
         onClose: Z
@@ -840,8 +840,8 @@ Nt.propTypes = {
 function Tt({
   onAIRequest: t,
   onSave: a,
-  onExport: s,
-  className: l = ""
+  onExport: l,
+  className: s = ""
 }) {
   const {
     state: n,
@@ -850,36 +850,43 @@ function Tt({
     hasArtifacts: u,
     closePanel: y,
     toggleFullscreen: c,
-    setViewMode: b,
+    setViewMode: w,
     getPanelUrl: P,
     openArtifact: x,
     instance: N
-  } = ue(), v = W(null), w = W(null), f = W(null), E = W(null), I = W(null), [D, z] = C(!1), [L, J] = C(!1), [K, U] = C(!0), [le, ee] = C(!1), [de, ae] = C(!1), [X, re] = C(!1), [j, ce] = C(50), [te, ie] = C(50), i = W(null), k = W(null), g = W(null), _ = W(null), M = W(null), Y = $(() => r ? xe(r.language) : "", [r]), ge = $(() => r ? ze(r.language) : "", [r]), fe = $(() => r ? P(r) : null, [r, P]), Le = $(() => r ? Ge(r.language) : "plaintext", [r]), T = $(() => n.artifacts.filter((m) => !m.isInline), [n.artifacts]), Z = $(() => r ? T.findIndex((m) => m.id === r.id) : -1, [r, T]), oe = $(() => {
+  } = de(), v = W(null), b = W(null), f = W(null), E = W(null), I = W(null), [D, z] = C(!1), [L, J] = C(!1), [K, U] = C(!0), [le, ee] = C(!1), [fe, ae] = C(!1), [X, re] = C(!1), [j, ie] = C(50), [te, oe] = C(50), i = W(null), k = W(null), g = W(null), _ = W(null), M = W(null), Y = $(() => r ? Ce(r.language) : "", [r]), ye = $(() => r ? ze(r.language) : "", [r]), pe = $(() => r ? P(r) : null, [r, P]), ce = $(() => r ? Ge(r.language) : "plaintext", [r]), T = $(() => n.artifacts.filter((m) => !m.isInline), [n.artifacts]), Z = $(() => r ? T.findIndex((m) => m.id === r.id) : -1, [r, T]), me = $(() => {
     var m;
     return ((m = N == null ? void 0 : N.config) == null ? void 0 : m.branding) !== !1;
-  }, [N]), ye = $(() => r ? j : Math.min(j, 30), [r, j]), ne = d((m) => `<svg viewBox="0 0 24 24" fill="currentColor">${ze(m)}</svg>`, []), Pe = d(() => {
+  }, [N]), _e = $(() => r ? j : Math.min(j, 30), [r, j]), ne = d((m) => `<svg viewBox="0 0 24 24" fill="currentColor">${ze(m)}</svg>`, []), Pe = d(() => {
     ae(!1), N.state.clearActiveArtifact();
-  }, [N]), _e = d(() => {
+  }, [N]), Ne = d(() => {
     if (!E.current || !(r != null && r.code)) return;
     const m = r.code.split(`
 `).length, A = Array.from({ length: m }, (G, O) => `<div>${O + 1}</div>`).join("");
     E.current.innerHTML = A;
-  }, [r]), Ne = d(() => {
-    w.current && Qe() && (window.Prism.highlightElement(w.current), w.current.dataset.highlighted = "true", setTimeout(() => {
-      Te();
-    }, 0));
-  }, []), Te = d(() => {
+  }, [r]), be = d(() => {
+    if (b.current && Qe() && (r != null && r.code)) {
+      const m = window.Prism.languages[ce];
+      m ? b.current.innerHTML = window.Prism.highlight(
+        r.code,
+        m,
+        ce
+      ) : b.current.textContent = r.code, b.current.dataset.highlighted = "true", setTimeout(() => {
+        Te();
+      }, 0);
+    }
+  }, [r == null ? void 0 : r.code, ce]), Te = d(() => {
     var A;
-    const m = (A = w.current) == null ? void 0 : A.closest("pre");
+    const m = (A = b.current) == null ? void 0 : A.closest("pre");
     if (m && I.current && E.current) {
       const O = window.getComputedStyle(m).backgroundColor;
       O && O !== "rgba(0, 0, 0, 0)" && O !== "transparent" && (I.current.style.backgroundColor = O, E.current.style.backgroundColor = O);
     }
-  }, []), be = d(() => {
+  }, []), we = d(() => {
     I.current && (I.current.style.backgroundColor = ""), E.current && (E.current.style.backgroundColor = "");
-  }, []), pe = d(() => {
-    _e(), Ne();
-  }, [_e, Ne]), $e = d(() => {
+  }, []), Ee = d(() => {
+    Ne(), be();
+  }, [Ne, be]), $e = d(() => {
     clearTimeout(_.current), U(!1), v.current && r && (N.bridge.setIframe(v.current), N.bridge.loadArtifact(r));
   }, [r, N]), Me = d(() => {
     clearTimeout(_.current), U(!1);
@@ -887,7 +894,7 @@ function Tt({
     clearTimeout(_.current), _.current = setTimeout(() => {
       U(!1);
     }, 1e3);
-  }, []), Ee = d(async () => {
+  }, []), ve = d(async () => {
     if (r)
       try {
         await navigator.clipboard.writeText(r.code), z(!0), setTimeout(() => z(!1), 2e3);
@@ -896,8 +903,8 @@ function Tt({
       }
   }, [r]), He = d(() => {
     if (!r) return;
-    const { code: m, language: A, title: G } = r, O = Re(A), he = `${G.toLowerCase().replace(/\s+/g, "-")}.${O}`, ke = new Blob([m], { type: "text/plain" }), se = URL.createObjectURL(ke), Q = document.createElement("a");
-    Q.href = se, Q.download = he, document.body.appendChild(Q), Q.click(), document.body.removeChild(Q), URL.revokeObjectURL(se);
+    const { code: m, language: A, title: G } = r, O = Re(A), ge = `${G.toLowerCase().replace(/\s+/g, "-")}.${O}`, xe = new Blob([m], { type: "text/plain" }), se = URL.createObjectURL(xe), Q = document.createElement("a");
+    Q.href = se, Q.download = ge, document.body.appendChild(Q), Q.click(), document.body.removeChild(Q), URL.revokeObjectURL(se);
   }, [r]), Ae = d(async () => {
     if (!(X || T.length === 0)) {
       re(!0);
@@ -910,8 +917,8 @@ function Tt({
           const qe = A.get(We) || 0;
           qe > 0 && (We = `${Be}-${qe}.${Fe}`), A.set(`${Be}.${Fe}`, qe + 1), m.file(We, Q.code);
         }
-        const G = await m.generateAsync({ type: "blob" }), he = `artifacts-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.zip`, ke = URL.createObjectURL(G), se = document.createElement("a");
-        se.href = ke, se.download = he, document.body.appendChild(se), se.click(), document.body.removeChild(se), URL.revokeObjectURL(ke);
+        const G = await m.generateAsync({ type: "blob" }), ge = `artifacts-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.zip`, xe = URL.createObjectURL(G), se = document.createElement("a");
+        se.href = xe, se.download = ge, document.body.appendChild(se), se.click(), document.body.removeChild(se), URL.revokeObjectURL(xe);
       } catch (m) {
         console.error("Failed to create ZIP:", m);
       } finally {
@@ -933,13 +940,13 @@ function Tt({
     });
   }, [j]), B = d((m) => {
     if (!i.current) return;
-    const A = window.innerWidth, O = (i.current.startX - m.clientX) / A * 100, he = i.current.startWidth + O;
-    ce(Math.min(Math.max(he, 25), 75));
+    const A = window.innerWidth, O = (i.current.startX - m.clientX) / A * 100, ge = i.current.startWidth + O;
+    ie(Math.min(Math.max(ge, 25), 75));
   }, []), R = d(() => {
     i.current = null, document.removeEventListener("mousemove", B), document.removeEventListener("mouseup", R), document.body.style.cursor = "", document.body.style.userSelect = "", document.querySelectorAll("iframe").forEach((m) => {
       m.style.pointerEvents = "";
     });
-  }, [B]), ve = d((m) => {
+  }, [B]), he = d((m) => {
     if (!f.current) return;
     const A = f.current.getBoundingClientRect();
     k.current = {
@@ -947,33 +954,33 @@ function Tt({
       startPosition: te,
       contentLeft: A.left,
       contentWidth: A.width
-    }, document.addEventListener("mousemove", Se), document.addEventListener("mouseup", we), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.querySelectorAll("iframe").forEach((G) => {
+    }, document.addEventListener("mousemove", Se), document.addEventListener("mouseup", ke), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.querySelectorAll("iframe").forEach((G) => {
       G.style.pointerEvents = "none";
     });
   }, [te]), Se = d((m) => {
     if (!k.current) return;
     const G = (m.clientX - k.current.contentLeft) / k.current.contentWidth * 100;
-    ie(Math.min(Math.max(G, 20), 80));
-  }, []), we = d(() => {
-    k.current = null, document.removeEventListener("mousemove", Se), document.removeEventListener("mouseup", we), document.body.style.cursor = "", document.body.style.userSelect = "", document.querySelectorAll("iframe").forEach((m) => {
+    oe(Math.min(Math.max(G, 20), 80));
+  }, []), ke = d(() => {
+    k.current = null, document.removeEventListener("mousemove", Se), document.removeEventListener("mouseup", ke), document.body.style.cursor = "", document.body.style.userSelect = "", document.querySelectorAll("iframe").forEach((m) => {
       m.style.pointerEvents = "";
     });
   }, [Se]);
   if (q(() => {
-    r && (M.current && M.current.isPreviewable !== r.isPreviewable && (ee(!0), setTimeout(() => ee(!1), 150)), M.current = r, be(), U(!0), h(), pe());
-  }, [r == null ? void 0 : r.id, be]), q(() => {
-    (n.viewMode === "code" || n.viewMode === "split") && pe();
-  }, [n.viewMode, pe]), q(() => (t && N.on("ai:request", t), a && N.on("save:request", a), s && N.on("export:complete", s), () => {
-    t && N.off("ai:request", t), a && N.off("save:request", a), s && N.off("export:complete", s);
-  }), [N, t, a, s]), q(() => () => {
-    R(), we(), clearTimeout(g.current), clearTimeout(_.current);
-  }, [R, we]), !n.isPanelOpen) return null;
+    r && (M.current && M.current.isPreviewable !== r.isPreviewable && (ee(!0), setTimeout(() => ee(!1), 150)), M.current = r, we(), U(!0), h(), Ee());
+  }, [r == null ? void 0 : r.id, we]), q(() => {
+    (n.viewMode === "code" || n.viewMode === "split") && Ee();
+  }, [n.viewMode, Ee]), q(() => (t && N.on("ai:request", t), a && N.on("save:request", a), l && N.on("export:complete", l), () => {
+    t && N.off("ai:request", t), a && N.off("save:request", a), l && N.off("export:complete", l);
+  }), [N, t, a, l]), q(() => () => {
+    R(), ke(), clearTimeout(g.current), clearTimeout(_.current);
+  }, [R, ke]), !n.isPanelOpen) return null;
   const Ie = [
     "artifactuse-panel",
     n.isFullscreen && "artifactuse-panel--fullscreen",
     !r && u && "artifactuse-panel--list",
     !u && "artifactuse-panel--empty",
-    l
+    s
   ].filter(Boolean).join(" "), Ze = [
     "artifactuse-panel__content",
     `artifactuse-panel__content--${n.viewMode}`,
@@ -993,7 +1000,7 @@ function Tt({
       },
       /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle-line" })
     ),
-    /* @__PURE__ */ e.createElement("header", { className: "artifactuse-panel__header" }, de && /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement("header", { className: "artifactuse-panel__header" }, fe && /* @__PURE__ */ e.createElement(
       "button",
       {
         className: "artifactuse-panel__back",
@@ -1005,7 +1012,7 @@ function Tt({
       "span",
       {
         className: "artifactuse-panel__icon",
-        dangerouslySetInnerHTML: { __html: `<svg viewBox="0 0 24 24" fill="currentColor">${ge}</svg>` }
+        dangerouslySetInnerHTML: { __html: `<svg viewBox="0 0 24 24" fill="currentColor">${ye}</svg>` }
       }
     ), /* @__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" }, Y, r.lineCount && ` • ${r.lineCount} lines`))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__tabs" }, /* @__PURE__ */ e.createElement(
       "button",
@@ -1013,7 +1020,7 @@ function Tt({
         className: `artifactuse-panel__tab ${n.viewMode === "preview" ? "artifactuse-panel__tab--active" : ""}`,
         disabled: !r.isPreviewable,
         title: "Preview",
-        onClick: () => b("preview")
+        onClick: () => w("preview")
       },
       /* @__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" }))
     ), /* @__PURE__ */ e.createElement(
@@ -1021,7 +1028,7 @@ function Tt({
       {
         className: `artifactuse-panel__tab ${n.viewMode === "code" ? "artifactuse-panel__tab--active" : ""}`,
         title: "Code",
-        onClick: () => b("code")
+        onClick: () => w("code")
       },
       /* @__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(
@@ -1030,7 +1037,7 @@ function Tt({
         className: `artifactuse-panel__tab ${n.viewMode === "split" ? "artifactuse-panel__tab--active" : ""}`,
         disabled: !r.isPreviewable,
         title: "Split view",
-        onClick: () => b("split")
+        onClick: () => w("split")
       },
       /* @__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" }))
     )), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__actions" }, /* @__PURE__ */ e.createElement(
@@ -1056,12 +1063,12 @@ function Tt({
         className: "artifactuse-panel__preview",
         style: n.viewMode === "split" ? { width: `${te}%` } : void 0
       },
-      K && fe && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__loading" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__spinner" })),
-      fe ? /* @__PURE__ */ e.createElement(
+      K && pe && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__loading" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__spinner" })),
+      pe ? /* @__PURE__ */ e.createElement(
         "iframe",
         {
           ref: v,
-          src: fe,
+          src: pe,
           className: `artifactuse-panel__iframe ${K ? "artifactuse-panel__iframe--loading" : ""}`,
           sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads",
           onLoad: $e,
@@ -1081,20 +1088,19 @@ function Tt({
         "div",
         {
           className: "artifactuse-panel__split-handle",
-          onMouseDown: ve
+          onMouseDown: he
         },
         /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__split-handle-line" })
       ),
-      /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__code-scroll", ref: I }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__line-numbers", ref: E }), /* @__PURE__ */ e.createElement("pre", { className: "artifactuse-panel__code-block" }, /* @__PURE__ */ e.createElement(
+      /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__code-scroll", ref: I }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__line-numbers", ref: E }), /* @__PURE__ */ e.createElement("pre", { className: `artifactuse-panel__code-block language-${ce}` }, /* @__PURE__ */ e.createElement(
         "code",
         {
-          ref: w,
-          className: `language-${Le}`
-        },
-        r.code
+          ref: b,
+          className: `language-${ce}`
+        }
       )))
     )),
-    /* @__PURE__ */ e.createElement("footer", { className: "artifactuse-panel__footer" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__footer-left" }, oe && /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement("footer", { className: "artifactuse-panel__footer" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__footer-left" }, me && /* @__PURE__ */ e.createElement(
       "a",
       {
         href: "https://artifactuse.com",
@@ -1110,7 +1116,7 @@ function Tt({
       {
         className: `artifactuse-panel__footer-action ${D ? "artifactuse-panel__footer-action--success" : ""}`,
         title: D ? "Copied!" : "Copy code",
-        onClick: Ee
+        onClick: ve
       },
       D ? /* @__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" }))
     ), /* @__PURE__ */ e.createElement(
@@ -1168,10 +1174,10 @@ function Tt({
           dangerouslySetInnerHTML: { __html: ne(m.language) }
         }
       ),
-      /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__artifact-item-content" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-title" }, m.title || "Untitled"), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-meta" }, xe(m.language), m.lineCount && ` • ${m.lineCount} lines`)),
+      /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__artifact-item-content" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-title" }, m.title || "Untitled"), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-meta" }, Ce(m.language), m.lineCount && ` • ${m.lineCount} lines`)),
       /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-index" }, A + 1)
     )))))))
-  )) : /* @__PURE__ */ e.createElement("div", { className: Ie, style: n.isFullscreen ? void 0 : { width: `${ye}%` } }, !n.isFullscreen && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle", onMouseDown: S }, /* @__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" }, T.length, " available"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__actions" }, /* @__PURE__ */ e.createElement(
+  )) : /* @__PURE__ */ e.createElement("div", { className: Ie, style: n.isFullscreen ? void 0 : { width: `${_e}%` } }, !n.isFullscreen && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle", onMouseDown: S }, /* @__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" }, T.length, " available"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__actions" }, /* @__PURE__ */ e.createElement(
     "button",
     {
       className: `artifactuse-panel__action ${X ? "artifactuse-panel__action--loading" : ""}`,
@@ -1202,9 +1208,9 @@ function Tt({
         dangerouslySetInnerHTML: { __html: ne(m.language) }
       }
     ),
-    /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__list-item-content" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__list-item-title" }, m.title || "Untitled"), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__list-item-meta" }, xe(m.language), m.lineCount && ` • ${m.lineCount} lines`)),
+    /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__list-item-content" }, /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__list-item-title" }, m.title || "Untitled"), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__list-item-meta" }, Ce(m.language), m.lineCount && ` • ${m.lineCount} lines`)),
     /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__list-item-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" })))
-  )))), /* @__PURE__ */ e.createElement("footer", { className: "artifactuse-panel__footer artifactuse-panel__footer--simple" }, oe && /* @__PURE__ */ e.createElement(
+  )))), /* @__PURE__ */ e.createElement("footer", { className: "artifactuse-panel__footer artifactuse-panel__footer--simple" }, me && /* @__PURE__ */ e.createElement(
     "a",
     {
       href: "https://artifactuse.com",
@@ -1214,7 +1220,7 @@ function Tt({
     },
     /* @__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" })),
     /* @__PURE__ */ e.createElement("span", null, "Artifactuse")
-  ))) : /* @__PURE__ */ e.createElement("div", { className: Ie, style: n.isFullscreen ? void 0 : { width: `${ye}%` } }, !n.isFullscreen && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle", onMouseDown: S }, /* @__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(
+  ))) : /* @__PURE__ */ e.createElement("div", { className: Ie, style: n.isFullscreen ? void 0 : { width: `${_e}%` } }, !n.isFullscreen && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle", onMouseDown: S }, /* @__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(
     "button",
     {
       className: "artifactuse-panel__action artifactuse-panel__action--close",
@@ -1222,7 +1228,7 @@ function Tt({
       onClick: y
     },
     /* @__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-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" }, oe && /* @__PURE__ */ e.createElement(
+  ))), /* @__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" }, me && /* @__PURE__ */ e.createElement(
     "a",
     {
       href: "https://artifactuse.com",
@@ -1235,10 +1241,10 @@ function Tt({
   )));
 }
 function $t({ className: t = "" }) {
-  const { state: a, artifactCount: s, hasArtifacts: l, togglePanel: n } = ue(), r = $(() => s > 99 ? "99+" : String(s), [s]), p = [
+  const { state: a, artifactCount: l, hasArtifacts: s, togglePanel: n } = de(), r = $(() => l > 99 ? "99+" : String(l), [l]), p = [
     "artifactuse-panel-toggle",
     a.isPanelOpen && "artifactuse-panel-toggle--active",
-    l && "artifactuse-panel-toggle--has-artifacts",
+    s && "artifactuse-panel-toggle--has-artifacts",
     t
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ e.createElement(
@@ -1249,22 +1255,22 @@ function $t({ className: t = "" }) {
       title: a.isPanelOpen ? "Close artifacts panel" : "Open artifacts panel"
     },
     /* @__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" })),
-    s > 0 && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel-toggle-badge" }, r)
+    l > 0 && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel-toggle-badge" }, r)
   );
 }
 const Xe = Ke(null);
 function bt({ children: t, config: a = {} }) {
-  const s = W(null);
-  s.current || (s.current = et(a));
-  const l = s.current, [n, r] = C({
+  const l = W(null);
+  l.current || (l.current = et(a));
+  const s = l.current, [n, r] = C({
     artifacts: [],
     activeArtifactId: null,
     isPanelOpen: !1,
     viewMode: "preview",
     isFullscreen: !1
-  }), [p, u] = C(() => l.getPanelTypes());
+  }), [p, u] = C(() => s.getPanelTypes());
   q(() => {
-    const f = l.state.subscribe((E) => {
+    const f = s.state.subscribe((E) => {
       r({
         artifacts: E.artifacts,
         activeArtifactId: E.activeArtifactId,
@@ -1273,84 +1279,86 @@ function bt({ children: t, config: a = {} }) {
         isFullscreen: E.isFullscreen
       });
     });
-    return l.applyTheme(), () => {
-      f(), l.destroy();
+    return s.applyTheme(), () => {
+      f(), s.destroy();
     };
-  }, [l]);
-  const y = $(() => n.activeArtifactId && n.artifacts.find((f) => f.id === n.activeArtifactId) || null, [n.artifacts, n.activeArtifactId]), c = n.artifacts.length, b = c > 0, P = $(() => y ? l.getPanelUrl(y) : null, [y, l]), x = d((f) => {
-    l.setTheme(f), l.applyTheme();
-  }, [l]), N = d((f, E) => {
-    l.registerPanel(f, E), u(l.getPanelTypes());
-  }, [l]), v = d((f) => {
-    l.unregisterPanel(f), u(l.getPanelTypes());
-  }, [l]), w = $(() => ({
-    instance: l,
+  }, [s]);
+  const y = $(() => n.activeArtifactId && n.artifacts.find((f) => f.id === n.activeArtifactId) || null, [n.artifacts, n.activeArtifactId]), c = n.artifacts.filter((f) => !f.isInline).length, w = c > 0, P = $(() => y ? s.getPanelUrl(y) : null, [y, s]), x = d((f) => {
+    s.setTheme(f), s.applyTheme();
+  }, [s]), N = d((f, E) => {
+    s.registerPanel(f, E), u(s.getPanelTypes());
+  }, [s]), v = d((f) => {
+    s.unregisterPanel(f), u(s.getPanelTypes());
+  }, [s]), b = $(() => ({
+    instance: s,
     state: n,
     activeArtifact: y,
     artifactCount: c,
-    hasArtifacts: b,
+    hasArtifacts: w,
     // Panel computed
     panelTypes: p,
     activePanelUrl: P,
     // Methods
-    processMessage: l.processMessage,
-    initializeContent: l.initializeContent,
-    openArtifact: l.openArtifact,
-    closePanel: l.closePanel,
-    togglePanel: l.togglePanel,
-    toggleFullscreen: l.toggleFullscreen,
-    setViewMode: l.setViewMode,
-    getPanelUrl: l.getPanelUrl,
-    sendToPanel: l.sendToPanel,
+    processMessage: s.processMessage,
+    initializeContent: s.initializeContent,
+    openArtifact: s.openArtifact,
+    closePanel: s.closePanel,
+    togglePanel: s.togglePanel,
+    toggleFullscreen: s.toggleFullscreen,
+    setViewMode: s.setViewMode,
+    getPanelUrl: s.getPanelUrl,
+    sendToPanel: s.sendToPanel,
     // Panel management
-    hasPanel: l.hasPanel,
+    hasPanel: s.hasPanel,
     registerPanel: N,
     unregisterPanel: v,
-    getPanelTypes: l.getPanelTypes,
+    getPanelTypes: s.getPanelTypes,
     // Events
-    on: l.on,
-    off: l.off,
+    on: s.on,
+    off: s.off,
+    // State management
+    clearArtifacts: () => s.state.clear(),
     // Theme
-    applyTheme: l.applyTheme,
+    applyTheme: s.applyTheme,
     setTheme: x,
-    getTheme: l.getTheme
+    getTheme: s.getTheme
   }), [
-    l,
+    s,
     n,
     y,
     c,
-    b,
+    w,
     p,
     P,
     x,
     N,
     v
   ]);
-  return /* @__PURE__ */ e.createElement(Xe.Provider, { value: w }, t);
+  return /* @__PURE__ */ e.createElement(Xe.Provider, { value: b }, t);
 }
-function ue() {
+function de() {
   const t = Ye(Xe);
   if (!t)
     throw new Error("useArtifactuse must be used within an ArtifactuseProvider");
   return t;
 }
 function wt(t, a) {
-  const { on: s, off: l } = ue();
+  const { on: l, off: s } = de();
   q(() => {
-    const n = s(t, a);
+    const n = l(t, a);
     return () => {
-      typeof n == "function" ? n() : l(t, a);
+      typeof n == "function" ? n() : s(t, a);
     };
-  }, [t, a, s, l]);
+  }, [t, a, l, s]);
 }
 function kt() {
   const {
     registerPanel: t,
     unregisterPanel: a,
-    hasPanel: s,
-    panelTypes: l,
+    hasPanel: l,
+    panelTypes: s,
     instance: n
-  } = ue(), r = d((u) => s({ type: u }), [s]), p = d((u, y = {}) => {
+  } = de(), r = d((u) => l({ type: u }), [l]), p = d((u, y = {}) => {
     var c;
     return ((c = n.panelResolver) == null ? void 0 : c.resolve(u, y)) || null;
   }, [n]);
@@ -1359,13 +1367,13 @@ function kt() {
     unregister: a,
     isRegistered: r,
     getPanelUrl: p,
-    types: l,
+    types: s,
     defaults: Je
   };
 }
 const Mt = {
   ArtifactuseProvider: bt,
-  useArtifactuse: ue,
+  useArtifactuse: de,
   useArtifactuseEvent: wt,
   usePanelRegistry: kt,
   DEFAULT_PANELS: Je
@@ -1381,7 +1389,7 @@ export {
   ht as ArtifactuseViewer,
   Je as DEFAULT_PANELS,
   Mt as default,
-  ue as useArtifactuse,
+  de as useArtifactuse,
   wt as useArtifactuseEvent,
   kt as usePanelRegistry
 };