artifactuse 0.1.0

package/dist/react/index.js

@@ -0,0 +1,1387 @@
+import e, { useState as C, useMemo as $, useCallback as d, useRef as W, useEffect as z, createContext as Ze, useContext as Ke } from "react";
+import { g as we, f as je, a as qe, b as Re, n as Ye, i as Ge, D as Oe, c as Qe } from "../index-_nD5FZzs.js";
+import { J as et } from "../jszip.min-CdmYyw5L.js";
+import { createPortal as tt } from "react-dom";
+function at({
+  artifact: t,
+  isActive: a = !1,
+  onOpen: n,
+  onCopy: l,
+  onDownload: s,
+  className: r = ""
+}) {
+  const [p, u] = C(!1), g = $(() => we(t.language), [t.language]), c = $(() => {
+    var k;
+    return je(t.size || ((k = t.code) == null ? void 0 : k.length) || 0);
+  }, [t.size, t.code]), b = $(() => qe(t.language), [t.language]), P = d((k) => {
+    k.stopPropagation(), n && n(t);
+  }, [t, n]), x = d(async (k) => {
+    k.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(t.code), u(!0), l && l(t), setTimeout(() => {
+        u(!1);
+      }, 2e3);
+    } catch {
+      const v = document.createElement("textarea");
+      v.value = t.code, v.style.position = "fixed", v.style.opacity = "0", document.body.appendChild(v), v.select();
+      try {
+        document.execCommand("copy"), u(!0), l && l(t), setTimeout(() => {
+          u(!1);
+        }, 2e3);
+      } catch (F) {
+        console.error("Failed to copy:", F);
+      }
+      document.body.removeChild(v);
+    }
+  }, [t, l]), _ = d((k) => {
+    var L;
+    k.stopPropagation();
+    const f = new Blob([t.code], { type: "text/plain" }), v = URL.createObjectURL(f), F = document.createElement("a"), D = Re(t.language), q = ((L = t.title) == null ? void 0 : L.replace(/[^a-z0-9]/gi, "_").toLowerCase()) || "code";
+    F.href = v, F.download = `${q}.${D}`, document.body.appendChild(F), F.click(), document.body.removeChild(F), URL.revokeObjectURL(v), s && s(t);
+  }, [t, s]), E = [
+    "artifactuse-card",
+    a && "artifactuse-card--active",
+    r
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e.createElement("div", { className: E, onClick: P }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-card__icon" }, /* @__PURE__ */ e.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      dangerouslySetInnerHTML: { __html: b }
+    }
+  )), /* @__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" }, g), /* @__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",
+    {
+      className: "artifactuse-card__action",
+      title: p ? "Copied!" : "Copy code",
+      onClick: x
+    },
+    p ? /* @__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(
+    "button",
+    {
+      className: "artifactuse-card__action",
+      title: "Download file",
+      onClick: _
+    },
+    /* @__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" }))
+  )), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-card__arrow" }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "9 18 15 12 9 6" }))));
+}
+function rt(t) {
+  if (!t) return null;
+  const a = t.trim();
+  if (a.startsWith("#")) {
+    let s = a.slice(1);
+    if (s.length === 3 && (s = s.split("").map((r) => r + r).join("")), s.length === 6) {
+      const r = parseInt(s.slice(0, 2), 16), p = parseInt(s.slice(2, 4), 16), u = parseInt(s.slice(4, 6), 16);
+      if (!isNaN(r) && !isNaN(p) && !isNaN(u)) return `${r}, ${p}, ${u}`;
+    }
+  }
+  const n = a.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+  if (n) return `${n[1]}, ${n[2]}, ${n[3]}`;
+  const l = a.split(/[\s,]+/).map(Number).filter((s) => !isNaN(s));
+  return l.length >= 3 ? `${l[0]}, ${l[1]}, ${l[2]}` : null;
+}
+function Ue(t) {
+  return t ? t.map((a) => typeof a == "string" ? { label: a, value: a } : a) : [];
+}
+function st(t) {
+  return ["text", "email", "password", "tel", "url", "number", "date", "time", "datetime-local"].includes(t);
+}
+function nt({
+  artifact: t,
+  onSubmit: a,
+  onCancel: n,
+  onReset: l,
+  onButtonClick: s,
+  className: r = "",
+  theme: p = "dark",
+  accent: u = null,
+  initialState: g = "active"
+  // 'active' | 'submitted' | 'cancelled' | 'inactive'
+}) {
+  var ie, ee, oe;
+  const c = W(null), [b, P] = C(g), x = b !== "active", _ = b === "active" ? "" : `artifactuse-form--${b}`, E = $(() => {
+    try {
+      return JSON.parse(t.code);
+    } catch {
+      return { title: "Invalid Form", variant: "fields", data: { fields: [] } };
+    }
+  }, [t.code]), k = t.id || E.id || `form-${Date.now()}`, f = ((ie = E.data) == null ? void 0 : ie.fields) || [], v = E.title || "Form", F = $(() => f.some((i) => i.type === "buttons"), [f]), D = $(() => E.variant === "buttons" ? f : [], [E.variant, f]), [q, L] = C(() => {
+    var w;
+    const i = {};
+    return f.forEach((y) => {
+      ["buttons", "divider", "heading"].includes(y.type) || (y.defaultValue !== void 0 ? i[y.name] = y.defaultValue : y.type === "checkbox" ? i[y.name] = !1 : i[y.name] = "");
+    }), (w = E.data) != null && w.defaults && Object.assign(i, E.data.defaults), i;
+  }), [J, K] = C({}), [U, ne] = C(!1);
+  z(() => {
+    P(g);
+  }, [g]), z(() => {
+    var w;
+    const i = {};
+    f.forEach((y) => {
+      ["buttons", "divider", "heading"].includes(y.type) || (y.defaultValue !== void 0 ? i[y.name] = y.defaultValue : y.type === "checkbox" ? i[y.name] = !1 : i[y.name] = "");
+    }), (w = E.data) != null && w.defaults && Object.assign(i, E.data.defaults), L(i), K({});
+  }, [t.code]), z(() => {
+    if (c.current && (c.current.setAttribute("data-artifactuse-theme", p), u)) {
+      const i = rt(u);
+      i && c.current.style.setProperty("--artifactuse-primary", i);
+    }
+  }, [p, u]);
+  const le = d((i) => {
+    P(i);
+  }, []), fe = d((i, w) => {
+    L((y) => ({ ...y, [i]: w })), K((y) => {
+      const N = { ...y };
+      return delete N[i], N;
+    });
+  }, []), te = d(() => {
+    var y;
+    const i = {};
+    f.forEach((N) => {
+      if (["buttons", "divider", "heading"].includes(N.type)) return;
+      const T = q[N.name];
+      if (N.required && !T && T !== 0 && T !== !1) {
+        i[N.name] = `${N.label || "This field"} is required`;
+        return;
+      }
+      if (N.pattern && T && !new RegExp(N.pattern).test(T)) {
+        i[N.name] = N.patternMessage || `${N.label || "This field"} is invalid`;
+        return;
+      }
+      if (N.type === "email" && T && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(T)) {
+        i[N.name] = "Please enter a valid email address";
+        return;
+      }
+      if (N.minLength && T && T.length < N.minLength) {
+        i[N.name] = `Minimum ${N.minLength} characters required`;
+        return;
+      }
+      if (N.maxLength && T && T.length > N.maxLength) {
+        i[N.name] = `Maximum ${N.maxLength} characters allowed`;
+        return;
+      }
+    });
+    const w = (y = E.data) == null ? void 0 : y.validation;
+    return w && Object.entries(w).forEach(([N, T]) => {
+      if (i[N]) return;
+      const Y = q[N];
+      T.pattern && Y && (new RegExp(T.pattern).test(Y) || (i[N] = T.message || `${N} is invalid`));
+    }), K(i), Object.keys(i).length === 0;
+  }, [f, q, (ee = E.data) == null ? void 0 : ee.validation]), X = d(() => {
+    var w;
+    const i = {};
+    f.forEach((y) => {
+      ["buttons", "divider", "heading"].includes(y.type) || (y.defaultValue !== void 0 ? i[y.name] = y.defaultValue : y.type === "checkbox" ? i[y.name] = !1 : i[y.name] = "");
+    }), (w = E.data) != null && w.defaults && Object.assign(i, E.data.defaults), L(i), K({});
+  }, [f, (oe = E.data) == null ? void 0 : oe.defaults]), ae = d((i) => {
+    i == null || i.preventDefault(), te() && (ne(!0), a == null || a({
+      formId: k,
+      action: "submit",
+      values: { ...q },
+      timestamp: Date.now()
+    }), setTimeout(() => {
+      ne(!1), le("submitted");
+    }, 300));
+  }, [k, q, a, te, le]), V = d((i) => {
+    const w = i.action || "custom";
+    switch (w) {
+      case "submit":
+        ae();
+        break;
+      case "cancel":
+        n == null || n({
+          formId: k,
+          action: "cancel",
+          buttonName: i.name || "cancel",
+          timestamp: Date.now()
+        }), setTimeout(() => {
+          le("cancelled");
+        }, 150);
+        break;
+      case "reset":
+        X(), l == null || l({
+          formId: k,
+          action: "reset",
+          buttonName: i.name || "reset",
+          timestamp: Date.now()
+        });
+        break;
+      case "custom":
+      default:
+        s == null || s({
+          formId: k,
+          action: w,
+          buttonName: i.name || i.label,
+          buttonLabel: i.label,
+          values: { ...q },
+          timestamp: Date.now()
+        }), setTimeout(() => {
+          le("submitted");
+        }, 150);
+        break;
+    }
+  }, [k, q, ae, n, l, s, X, le]);
+  return x ? /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      ref: c,
+      className: `artifactuse-inline-form artifactuse-form-${E.variant || "fields"} ${_} ${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" }, v))
+  ) : E.variant === "buttons" ? /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      ref: c,
+      className: `artifactuse-inline-form artifactuse-form-buttons ${r}`,
+      "data-artifactuse-theme": p
+    },
+    (E.title || E.description) && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-header" }, E.title && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-title" }, E.title), E.description && /* @__PURE__ */ e.createElement("p", { className: "artifactuse-form-description" }, E.description)),
+    /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-buttons" }, D.map((i, w) => /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        key: i.name || i.label || w,
+        type: "button",
+        className: `artifactuse-form-btn artifactuse-form-btn-${i.variant || "secondary"}`,
+        onClick: () => V(i),
+        disabled: i.disabled || U
+      },
+      i.icon && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-form-btn-icon", dangerouslySetInnerHTML: { __html: i.icon } }),
+      i.label
+    )))
+  ) : /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      ref: c,
+      className: `artifactuse-inline-form artifactuse-form-fields ${r}`,
+      "data-artifactuse-theme": p
+    },
+    (E.title || E.description) && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-header" }, E.title && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-title" }, E.title), E.description && /* @__PURE__ */ e.createElement("p", { className: "artifactuse-form-description" }, E.description)),
+    /* @__PURE__ */ e.createElement("form", { onSubmit: ae, className: "artifactuse-form" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-fields" }, f.map((i, w) => /* @__PURE__ */ e.createElement(
+      lt,
+      {
+        key: i.name || w,
+        field: i,
+        formId: k,
+        value: q[i.name],
+        error: J[i.name],
+        isSubmitting: U,
+        onChange: (y) => fe(i.name, y),
+        onButtonAction: V
+      }
+    ))), !F && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-buttons artifactuse-form-buttons-default" }, /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        type: "button",
+        className: "artifactuse-form-btn artifactuse-form-btn-ghost",
+        onClick: () => V({ action: "cancel", label: "Cancel" })
+      },
+      "Cancel"
+    ), /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        type: "submit",
+        className: "artifactuse-form-btn artifactuse-form-btn-primary",
+        disabled: U
+      },
+      U && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-form-btn-spinner" }),
+      U ? "Submitting..." : "Submit"
+    )))
+  );
+}
+function lt({ field: t, formId: a, value: n, error: l, isSubmitting: s, 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(
+      "button",
+      {
+        key: c.name || c.label || b,
+        type: c.action === "submit" ? "submit" : "button",
+        className: `artifactuse-form-btn artifactuse-form-btn-${c.variant || "secondary"}`,
+        onClick: c.action !== "submit" ? () => p(c) : void 0,
+        disabled: c.disabled || c.action === "submit" && s
+      },
+      s && c.action === "submit" ? /* @__PURE__ */ e.createElement("span", { className: "artifactuse-form-btn-spinner" }) : c.icon ? /* @__PURE__ */ e.createElement("span", { className: "artifactuse-form-btn-icon", dangerouslySetInnerHTML: { __html: c.icon } }) : null,
+      s && c.action === "submit" ? "Submitting..." : c.label
+    )));
+  if (t.type === "divider")
+    return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-divider" });
+  if (t.type === "heading")
+    return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-heading" }, t.label);
+  if (t.type === "checkbox")
+    return /* @__PURE__ */ e.createElement("div", { className: "artifactuse-form-field" }, /* @__PURE__ */ e.createElement("label", { className: "artifactuse-checkbox-label" }, /* @__PURE__ */ e.createElement(
+      "input",
+      {
+        type: "checkbox",
+        id: u,
+        name: t.name,
+        checked: n || !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));
+  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",
+      {
+        type: "radio",
+        name: t.name,
+        value: c.value,
+        checked: n === 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));
+  const g = () => st(t.type) ? /* @__PURE__ */ e.createElement(
+    "input",
+    {
+      type: t.type,
+      id: u,
+      name: t.name,
+      value: n || "",
+      placeholder: t.placeholder,
+      disabled: t.disabled,
+      required: t.required,
+      className: "artifactuse-input",
+      onChange: (c) => r(t.type === "number" ? Number(c.target.value) : c.target.value)
+    }
+  ) : t.type === "textarea" ? /* @__PURE__ */ e.createElement(
+    "textarea",
+    {
+      id: u,
+      name: t.name,
+      value: n || "",
+      placeholder: t.placeholder,
+      disabled: t.disabled,
+      required: t.required,
+      rows: t.rows || 3,
+      className: "artifactuse-textarea",
+      onChange: (c) => r(c.target.value)
+    }
+  ) : t.type === "select" ? /* @__PURE__ */ e.createElement(
+    "select",
+    {
+      id: u,
+      name: t.name,
+      value: n || "",
+      disabled: t.disabled,
+      required: t.required,
+      className: "artifactuse-select",
+      onChange: (c) => r(c.target.value)
+    },
+    /* @__PURE__ */ e.createElement("option", { value: "" }, t.placeholder || "Select..."),
+    Ue(t.options).map((c) => /* @__PURE__ */ e.createElement("option", { key: c.value, value: c.value, disabled: c.disabled }, c.label))
+  ) : /* @__PURE__ */ e.createElement(
+    "input",
+    {
+      type: "text",
+      id: u,
+      name: t.name,
+      value: n || "",
+      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" }, "*")), g(), t.helpText && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-help-text" }, t.helpText), l && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-error-text" }, l));
+}
+const R = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888"><circle cx="12" cy="8" r="4"/><path d="M12 14c-6 0-8 3-8 6v2h16v-2c0-3-2-6-8-6z"/></svg>', ct = {
+  twitter: 280,
+  linkedin: 3e3,
+  instagram: 2200,
+  facebook: 63206,
+  threads: 500,
+  tiktok: 2200,
+  youtube: 100
+}, it = {
+  twitter: "X",
+  linkedin: "LinkedIn",
+  instagram: "Instagram",
+  facebook: "Facebook",
+  threads: "Threads",
+  tiktok: "TikTok",
+  youtube: "YouTube"
+}, xe = ({ 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" })), H = (t) => t ? t >= 1e6 ? `${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${(t / 1e3).toFixed(1)}K` : t.toString() : "0", De = (t) => {
+  try {
+    return new URL(t).hostname.replace("www.", "");
+  } catch {
+    return 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;
+}, Ve = ({ author: t, content: a, engagement: n, meta: l }) => {
+  var p, u, g;
+  const s = a.media || [], r = n.likes || n.retweets || n.replies || n.views;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || R, alt: t.name, className: "artifactuse-social-avatar", onError: (c) => c.target.src = R }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, /* @__PURE__ */ e.createElement("span", null, t.name), t.verified && /* @__PURE__ */ e.createElement(xe, { 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: ue(a.text) } }), s.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, /* @__PURE__ */ e.createElement("div", { className: `artifactuse-social-media-grid ${s.length === 1 ? "artifactuse-social-media-single" : ""}`, "data-count": s.length }, s.slice(0, 4).map((c, b) => /* @__PURE__ */ e.createElement("img", { key: b, src: c.url, alt: c.alt || "", onError: (P) => P.target.style.display = "none" })))), a.link && !s.length && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-card" }, a.link.image && /* @__PURE__ */ e.createElement("img", { src: a.link.image, alt: a.link.title, className: "artifactuse-social-link-image", onError: (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 || De(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) => {
+    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" }, H(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) || R, 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" }, (g = a.quote.author) == null ? void 0 : g.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, H(n.replies || 0), " replies"), /* @__PURE__ */ e.createElement("span", null, H(n.retweets || 0), " reposts"), /* @__PURE__ */ e.createElement("span", null, H(n.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, H(n.views || 0), " views")));
+}, ot = ({ author: t, content: a, engagement: n, meta: l }) => {
+  const s = n.likes || n.comments || n.shares || n.reposts;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || R, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = R }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-info" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.connection && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-author-connection" }, "· ", t.connection)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-headline" }, t.headline), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-timestamp" }, l.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 || De(a.link.url))))), s && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, H(n.likes || 0), " reactions"), /* @__PURE__ */ e.createElement("span", null, H(n.comments || 0), " comments"), /* @__PURE__ */ e.createElement("span", null, H(n.shares || n.reposts || 0), " reposts")));
+}, mt = ({ author: t, content: a, engagement: n, meta: l }) => {
+  const s = a.media || [];
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || R, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = R }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.verified && /* @__PURE__ */ e.createElement(xe, { type: "blue" })), l.location && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-location" }, l.location))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, s[0] ? /* @__PURE__ */ e.createElement("img", { src: s[0].url, alt: s[0].alt || "", onError: (r) => r.target.style.display = "none" }) : /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media-placeholder" })), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-likes" }, H(n.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" }, l.timestamp || "JUST NOW"));
+}, ut = ({ author: t, content: a, engagement: n, meta: l }) => {
+  const s = a.media || [], r = $(() => {
+    const u = n.reactions || {};
+    return Object.values(u).reduce((g, c) => g + (c || 0), 0) || n.likes || 0;
+  }, [n]), p = n.likes || n.comments || n.shares || r;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || R, alt: t.name, className: "artifactuse-social-avatar", onError: (u) => u.target.src = R }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-timestamp" }, l.timestamp || "Just now", " · 🌐"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-content" }, /* @__PURE__ */ e.createElement("p", { className: "artifactuse-social-text", dangerouslySetInnerHTML: { __html: ue(a.text) } }), s.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-media-grid", "data-count": s.length }, s.slice(0, 4).map((u, g) => /* @__PURE__ */ e.createElement("img", { key: g, src: u.url, alt: u.alt || "", onError: (c) => c.target.style.display = "none" })))), a.link && !s.length && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-link-card" }, a.link.image && /* @__PURE__ */ e.createElement("img", { src: a.link.image, alt: a.link.title, className: "artifactuse-social-link-image", onError: (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 || De(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, "👍❤️ ", H(r)), /* @__PURE__ */ e.createElement("span", null, H(n.comments || 0), " comments · ", H(n.shares || 0), " shares")));
+}, dt = ({ author: t, content: a, engagement: n, meta: l }) => {
+  const s = n.likes || n.replies || n.reposts;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-header" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || R, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = R }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-author-name" }, t.name, t.verified && /* @__PURE__ */ e.createElement(xe, { 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: ue(a.text) } })), s && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-engagement" }, /* @__PURE__ */ e.createElement("span", null, H(n.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, H(n.replies || 0), " replies"), /* @__PURE__ */ e.createElement("span", null, H(n.reposts || 0), " reposts")));
+}, ft = ({ author: t, content: a, engagement: n, meta: l }) => {
+  const s = a.media || [], r = n.likes || n.comments || n.shares;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, s[0] ? /* @__PURE__ */ e.createElement("img", { src: s[0].url, alt: "Video thumbnail", onError: (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 || R, alt: t.name, className: "artifactuse-social-avatar", onError: (p) => p.target.src = R }), /* @__PURE__ */ e.createElement("span", { className: "artifactuse-social-author-name" }, "@", t.name), t.verified && /* @__PURE__ */ e.createElement(xe, { 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, H(n.likes || 0), " likes"), /* @__PURE__ */ e.createElement("span", null, H(n.comments || 0), " comments"), /* @__PURE__ */ e.createElement("span", null, H(n.shares || 0), " shares")));
+}, pt = ({ author: t, content: a, engagement: n, meta: l }) => {
+  const s = a.media || [];
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail" }, s[0] ? /* @__PURE__ */ e.createElement("img", { src: s[0].url, alt: "Video thumbnail", onError: (r) => r.target.style.display = "none" }) : /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-thumbnail-placeholder" }), a.duration && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-duration" }, a.duration)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-info" }, /* @__PURE__ */ e.createElement("img", { src: t.avatar || R, alt: t.name, className: "artifactuse-social-avatar", onError: (r) => r.target.src = R }), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-details" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-title" }, a.title), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-channel" }, t.name), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-meta" }, H(n.views || 0), " views · ", l.timestamp || "Just now"))));
+};
+function Et({ artifact: t, theme: a = "dark", onCopy: n }) {
+  const [l, s] = 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: g = {}, content: c = {}, engagement: b = {}, meta: P = {} } = u, x = ct[p] || 280, _ = (c.text || "").length, E = _ > x ? "error" : _ > x * 0.9 ? "warning" : "", k = d(() => {
+    const v = c.text || "";
+    navigator.clipboard.writeText(v).then(() => {
+      s("Copied!"), setTimeout(() => s("Copy"), 2e3), n == null || n({ platform: p, text: v });
+    });
+  }, [c.text, p, n]), f = () => {
+    const v = { author: g, content: c, engagement: b, meta: P };
+    switch (p) {
+      case "twitter":
+        return /* @__PURE__ */ e.createElement(Ve, { ...v });
+      case "linkedin":
+        return /* @__PURE__ */ e.createElement(ot, { ...v });
+      case "instagram":
+        return /* @__PURE__ */ e.createElement(mt, { ...v });
+      case "facebook":
+        return /* @__PURE__ */ e.createElement(ut, { ...v });
+      case "threads":
+        return /* @__PURE__ */ e.createElement(dt, { ...v });
+      case "tiktok":
+        return /* @__PURE__ */ e.createElement(ft, { ...v });
+      case "youtube":
+        return /* @__PURE__ */ e.createElement(pt, { ...v });
+      default:
+        return /* @__PURE__ */ e.createElement(Ve, { ...v });
+    }
+  };
+  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, it[p] || p)), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-social-actions-right" }, /* @__PURE__ */ e.createElement("span", { className: `artifactuse-social-char-counter ${E}` }, _, "/", x), /* @__PURE__ */ e.createElement("button", { className: "artifactuse-social-copy-btn", onClick: k }, l))));
+}
+function vt({
+  isOpen: t = !1,
+  type: a = "image",
+  src: n = "",
+  alt: l = "",
+  caption: s = "",
+  onClose: r,
+  className: p = ""
+}) {
+  const u = W(null), [g, c] = C(!1), [b, P] = C(!1);
+  z(() => (P(!0), () => P(!1)), []), z(() => {
+    var f;
+    return t ? (document.body.style.overflow = "hidden", (f = u.current) == null || f.focus()) : (document.body.style.overflow = "", c(!1)), () => {
+      document.body.style.overflow = "";
+    };
+  }, [t]), z(() => {
+    function f(v) {
+      v.key === "Escape" && t && r && r();
+    }
+    return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
+  }, [t, r]);
+  const x = d(() => {
+    c(!1), r && r();
+  }, [r]), _ = d(() => {
+    a === "image" && c((f) => !f);
+  }, [a]), E = d(() => {
+    const f = document.createElement("a");
+    f.href = n, f.download = l || "download", document.body.appendChild(f), f.click(), document.body.removeChild(f);
+  }, [n, l]);
+  if (!t || !b)
+    return null;
+  const k = /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      ref: u,
+      className: `artifactuse-viewer-overlay ${p}`,
+      onClick: x,
+      tabIndex: -1,
+      role: "dialog",
+      "aria-modal": "true"
+    },
+    /* @__PURE__ */ e.createElement("div", { className: "artifactuse-viewer-content", onClick: (f) => f.stopPropagation() }, a === "image" && /* @__PURE__ */ e.createElement(
+      "img",
+      {
+        src: n,
+        alt: l,
+        className: `artifactuse-viewer-image ${g ? "artifactuse-viewer-image--zoomed" : ""}`,
+        onClick: _
+      }
+    ), a === "pdf" && /* @__PURE__ */ e.createElement(
+      "iframe",
+      {
+        src: n,
+        className: "artifactuse-viewer-pdf",
+        title: l || "PDF Viewer"
+      }
+    ), /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        className: "artifactuse-viewer-close",
+        onClick: x,
+        title: "Close (Esc)"
+      },
+      /* @__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" }))
+    ), a === "image" && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-viewer-controls" }, /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        className: "artifactuse-viewer-control",
+        onClick: _,
+        title: g ? "Zoom out" : "Zoom in"
+      },
+      g ? /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ e.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }), /* @__PURE__ */ e.createElement("line", { x1: "8", y1: "11", x2: "14", y2: "11" })) : /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ e.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }), /* @__PURE__ */ e.createElement("line", { x1: "11", y1: "8", x2: "11", y2: "14" }), /* @__PURE__ */ e.createElement("line", { x1: "8", y1: "11", x2: "14", y2: "11" }))
+    ), /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        className: "artifactuse-viewer-control",
+        onClick: E,
+        title: "Download"
+      },
+      /* @__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" }))
+    )), s && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-viewer-caption" }, s))
+  );
+  return tt(k, document.body);
+}
+function ht(t) {
+  if (!t) return null;
+  try {
+    const a = decodeURIComponent(escape(atob(t)));
+    return JSON.parse(a);
+  } catch {
+    try {
+      const n = 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(n);
+    } catch (n) {
+      return console.error("Failed to parse artifact data:", n), null;
+    }
+  }
+}
+function gt(t) {
+  const a = [];
+  if (!t) return a;
+  const n = /<div\s+class="artifactuse-placeholder[^"]*"[^>]*data-artifact-id="([^"]+)"[^>]*data-artifact-type="([^"]+)"[^>]*data-artifact=["']([^"']*)["'][^>]*><\/div>/gi;
+  let l = 0, s;
+  for (; (s = n.exec(t)) !== null; ) {
+    if (s.index > l) {
+      const u = t.slice(l, s.index);
+      u.trim() && a.push({ type: "html", content: u });
+    }
+    const r = ht(s[3]), p = s[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 = s.index + s[0].length;
+  }
+  if (l < t.length) {
+    const r = t.slice(l);
+    r.trim() && a.push({ type: "html", content: r });
+  }
+  return a.length === 0 && t.trim() && a.push({ type: "html", content: t }), a;
+}
+function yt() {
+  return `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function _t({
+  content: t,
+  messageId: a = yt(),
+  inlineCards: n = !0,
+  typing: l = !1,
+  isLastMessage: s = !1,
+  // Whether this is the last/most recent message
+  onArtifactDetected: r,
+  onArtifactOpen: p,
+  onArtifactCopy: u,
+  onArtifactDownload: g,
+  onFormSubmit: c,
+  onFormCancel: b,
+  onFormButtonClick: P,
+  onSocialCopy: x,
+  onMediaOpen: _,
+  className: E = ""
+}) {
+  const {
+    processMessage: k,
+    openArtifact: f,
+    state: v,
+    getTheme: F,
+    instance: D
+  } = de(), q = W(null), L = W(null), J = W(null), K = W(l), [U, ne] = C(""), [le, fe] = C([]), [te, X] = C(!1), [ae, V] = C(!1), [ie, ee] = C("image"), [oe, i] = C(""), [w, y] = C(""), [N, T] = C(""), Y = $(() => typeof F == "function" ? F() : "dark", [F]), ge = (v == null ? void 0 : v.activeArtifactId) || null, pe = $(() => gt(U), [U]), Ce = $(() => te || s ? "active" : "inactive", [te, s]);
+  z(() => {
+    l && X(!0);
+  }, [l]);
+  const M = d((h) => {
+    ee(h.type || "image"), i(h.src || ""), y(h.alt || ""), T(h.caption || ""), V(!0), _ && _(h);
+  }, [_]), Z = d(() => {
+    V(!1), i(""), y(""), T("");
+  }, []), me = d(() => {
+    if (!L.current) return;
+    L.current.querySelectorAll('img[data-lightbox="true"]').forEach((o) => {
+      o._lightboxHandler && o.removeEventListener("click", o._lightboxHandler), o._lightboxHandler = (I) => {
+        I.preventDefault(), I.stopPropagation(), M({
+          type: "image",
+          src: o.src,
+          alt: o.alt || "",
+          caption: o.dataset.caption || o.alt || ""
+        });
+      }, o.addEventListener("click", o._lightboxHandler), o.style.cursor = "zoom-in";
+    }), L.current.querySelectorAll(".artifactuse-image-container img").forEach((o) => {
+      o._lightboxHandler || (o._lightboxHandler = (I) => {
+        I.preventDefault(), I.stopPropagation();
+        const B = o.closest(".artifactuse-image-container"), j = B == null ? void 0 : B.querySelector(".artifactuse-image-caption"), ce = (j == null ? void 0 : j.textContent) || o.dataset.caption || o.alt || "";
+        M({
+          type: "image",
+          src: o.src,
+          alt: o.alt || "",
+          caption: ce
+        });
+      }, 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 = (I) => {
+        I.preventDefault(), I.stopPropagation();
+        const B = o.closest(".artifactuse-gallery-item"), j = B == null ? void 0 : B.querySelector(".artifactuse-gallery-caption"), ce = (j == null ? void 0 : j.textContent) || o.dataset.caption || o.alt || "";
+        M({
+          type: "image",
+          src: o.src,
+          alt: o.alt || "",
+          caption: ce
+        });
+      }, o.addEventListener("click", o._lightboxHandler), o.style.cursor = "zoom-in");
+    }), L.current.querySelectorAll('a[href$=".pdf"], a[data-type="pdf"]').forEach((o) => {
+      o._pdfHandler && o.removeEventListener("click", o._pdfHandler), o._pdfHandler = (I) => {
+        I.preventDefault(), I.stopPropagation(), M({
+          type: "pdf",
+          src: o.href,
+          alt: o.textContent || "PDF Document",
+          caption: o.title || o.textContent || ""
+        });
+      }, o.addEventListener("click", o._pdfHandler);
+    }), L.current.querySelectorAll(".artifactuse-pdf-container, [data-pdf-viewer]").forEach((o) => {
+      var B;
+      o._pdfHandler && o.removeEventListener("click", o._pdfHandler);
+      const I = o.dataset.pdfSrc || ((B = o.querySelector("iframe")) == null ? void 0 : B.src) || "";
+      I && (o._pdfHandler = (j) => {
+        j.preventDefault(), j.stopPropagation(), M({
+          type: "pdf",
+          src: I,
+          alt: "PDF Document",
+          caption: o.dataset.caption || ""
+        });
+      }, o.addEventListener("click", o._pdfHandler), o.style.cursor = "pointer");
+    }), L.current.querySelectorAll(".artifactuse-video-preview-wrapper, .video-preview-wrapper").forEach((o) => {
+      o._clickHandler && o.removeEventListener("click", o._clickHandler), o._clickHandler = (I) => {
+        if (I.target.closest(".artifactuse-video-play-button")) return;
+        const B = o.dataset.videoUrl || o.dataset.url;
+        B && window.open(B, "_blank", "noopener,noreferrer");
+      }, o.addEventListener("click", o._clickHandler);
+    });
+  }, [M]), ye = d(() => {
+    if (!L.current) return;
+    L.current.querySelectorAll("img").forEach((A) => {
+      A._lightboxHandler && (A.removeEventListener("click", A._lightboxHandler), delete A._lightboxHandler);
+    }), L.current.querySelectorAll('a[href$=".pdf"], a[data-type="pdf"]').forEach((A) => {
+      A._pdfHandler && (A.removeEventListener("click", A._pdfHandler), delete A._pdfHandler);
+    }), L.current.querySelectorAll(".artifactuse-pdf-container, [data-pdf-viewer]").forEach((A) => {
+      A._pdfHandler && (A.removeEventListener("click", A._pdfHandler), delete A._pdfHandler);
+    }), L.current.querySelectorAll(".artifactuse-video-preview-wrapper, .video-preview-wrapper").forEach((A) => {
+      A._clickHandler && (A.removeEventListener("click", A._clickHandler), delete A._clickHandler);
+    });
+  }, []), re = d(() => {
+    J.current && clearTimeout(J.current), J.current = setTimeout(async () => {
+      if (D != null && D.initializeContent && L.current)
+        try {
+          await D.initializeContent(L.current);
+        } catch (h) {
+          console.error("Failed to initialize content:", h);
+        }
+      me();
+    }, 100);
+  }, [D, me]);
+  z(() => {
+    if (t) {
+      const h = k(t, a);
+      ne(h.html), fe(h.artifacts), h.artifacts.length > 0 && r && r(h.artifacts), l || re();
+    }
+  }, [t, a, k, l, re, r]), z(() => {
+    K.current === !0 && l === !1 && re(), K.current = l;
+  }, [l, re]), z(() => (l && X(!0), l || re(), () => {
+    J.current && clearTimeout(J.current), ye();
+  }), []);
+  const Le = d((h) => {
+    f(h), p && p(h);
+  }, [f, p]), _e = d((h) => {
+    u && u(h);
+  }, [u]), Ne = d((h) => {
+    g && g(h);
+  }, [g]), Pe = d((h) => {
+    c && c(h);
+  }, [c]), Ee = d((h) => {
+    b && b(h);
+  }, [b]), Te = d((h) => {
+    P && P(h);
+  }, [P]), Me = d((h) => {
+    x && x(h);
+  }, [x]), $e = (h, ve) => {
+    switch (h.type) {
+      case "html":
+        return /* @__PURE__ */ e.createElement(
+          "div",
+          {
+            key: `html-${ve}`,
+            dangerouslySetInnerHTML: { __html: h.content }
+          }
+        );
+      case "form":
+        return h.artifact.isInline ? /* @__PURE__ */ e.createElement(
+          nt,
+          {
+            key: `form-${h.artifact.id}`,
+            artifact: h.artifact,
+            theme: Y,
+            initialState: Ce,
+            onSubmit: Pe,
+            onCancel: Ee,
+            onButtonClick: Te
+          }
+        ) : null;
+      case "social":
+        return /* @__PURE__ */ e.createElement(
+          Et,
+          {
+            key: `social-${h.artifact.id}`,
+            artifact: h.artifact,
+            theme: Y,
+            onCopy: Me
+          }
+        );
+      case "panel":
+        return n ? /* @__PURE__ */ e.createElement(
+          at,
+          {
+            key: `panel-${h.artifact.id}`,
+            artifact: h.artifact,
+            isActive: ge === h.artifact.id,
+            onOpen: Le,
+            onCopy: _e,
+            onDownload: Ne
+          }
+        ) : null;
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      ref: q,
+      className: `artifactuse-agent-message ${E}`.trim()
+    },
+    /* @__PURE__ */ e.createElement("div", { ref: L, className: "artifactuse-message-content" }, pe.map($e)),
+    /* @__PURE__ */ e.createElement(
+      vt,
+      {
+        isOpen: ae,
+        type: ie,
+        src: oe,
+        alt: w,
+        caption: N,
+        onClose: Z
+      }
+    )
+  );
+}
+_t.propTypes = {
+  /** The raw message content (markdown/HTML from AI) */
+  content: (t, a) => {
+    if (typeof t[a] != "string")
+      return new Error(`${a} must be a string`);
+  },
+  /** Unique message ID */
+  messageId: (t, a) => {
+    if (t[a] !== void 0 && typeof t[a] != "string")
+      return new Error(`${a} must be a string`);
+  },
+  /** Whether to show artifact cards inline */
+  inlineCards: (t, a) => {
+    if (t[a] !== void 0 && typeof t[a] != "boolean")
+      return new Error(`${a} must be a boolean`);
+  },
+  /** Whether the message is still being typed/streamed */
+  typing: (t, a) => {
+    if (t[a] !== void 0 && typeof t[a] != "boolean")
+      return new Error(`${a} must be a boolean`);
+  },
+  /** Whether this is the last/most recent message in the conversation */
+  isLastMessage: (t, a) => {
+    if (t[a] !== void 0 && typeof t[a] != "boolean")
+      return new Error(`${a} must be a boolean`);
+  }
+};
+function Pt({
+  onAIRequest: t,
+  onSave: a,
+  onExport: n,
+  className: l = ""
+}) {
+  const {
+    state: s,
+    activeArtifact: r,
+    artifactCount: p,
+    hasArtifacts: u,
+    closePanel: g,
+    toggleFullscreen: c,
+    setViewMode: b,
+    getPanelUrl: P,
+    openArtifact: x,
+    instance: _
+  } = de(), E = W(null), k = W(null), f = W(null), v = W(null), F = W(null), [D, q] = C(!1), [L, J] = C(!1), [K, U] = C(!0), [ne, le] = C(!1), [fe, te] = C(!1), [X, ae] = C(!1), [V, ie] = C(50), [ee, oe] = C(50), i = W(null), w = W(null), y = W(null), N = W(null), T = W(null), Y = $(() => r ? we(r.language) : "", [r]), ge = $(() => r ? qe(r.language) : "", [r]), pe = $(() => r ? P(r) : null, [r, P]), Ce = $(() => r ? Ye(r.language) : "plaintext", [r]), M = $(() => s.artifacts.filter((m) => !m.isInline), [s.artifacts]), Z = $(() => r ? M.findIndex((m) => m.id === r.id) : -1, [r, M]), me = $(() => {
+    var m;
+    return ((m = _ == null ? void 0 : _.config) == null ? void 0 : m.branding) !== !1;
+  }, [_]), ye = $(() => r ? V : Math.min(V, 30), [r, V]), re = d((m) => `<svg viewBox="0 0 24 24" fill="currentColor">${qe(m)}</svg>`, []), Le = d(() => {
+    te(!1), _.state.clearActiveArtifact();
+  }, [_]), _e = d(() => {
+    if (!v.current || !(r != null && r.code)) return;
+    const m = r.code.split(`
+`).length, S = Array.from({ length: m }, (G, O) => `<div>${O + 1}</div>`).join("");
+    v.current.innerHTML = S;
+  }, [r]), Ne = d(() => {
+    k.current && Ge() && (window.Prism.highlightElement(k.current), setTimeout(() => {
+      Pe();
+    }, 0));
+  }, []), Pe = d(() => {
+    var S;
+    const m = (S = k.current) == null ? void 0 : S.closest("pre");
+    if (m && F.current && v.current) {
+      const O = window.getComputedStyle(m).backgroundColor;
+      O && O !== "rgba(0, 0, 0, 0)" && O !== "transparent" && (F.current.style.backgroundColor = O, v.current.style.backgroundColor = O);
+    }
+  }, []), Ee = d(() => {
+    _e(), ne || Ne();
+  }, [_e, Ne, ne]), Te = d(() => {
+    clearTimeout(T.current), U(!1), E.current && r && (_.bridge.setIframe(E.current), _.bridge.loadArtifact(r));
+  }, [r, _]), Me = d(() => {
+    clearTimeout(T.current), U(!1);
+  }, []), $e = d(() => {
+    clearTimeout(T.current), T.current = setTimeout(() => {
+      U(!1);
+    }, 1e4);
+  }, []), h = d(async () => {
+    if (r)
+      try {
+        await navigator.clipboard.writeText(r.code), q(!0), setTimeout(() => q(!1), 2e3);
+      } catch (m) {
+        console.error("Failed to copy:", m);
+      }
+  }, [r]), ve = d(() => {
+    if (!r) return;
+    const { code: m, language: S, title: G } = r, O = Re(S), 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);
+  }, [r]), Ae = d(async () => {
+    if (!(X || M.length === 0)) {
+      ae(!0);
+      try {
+        const m = new et(), S = /* @__PURE__ */ new Map();
+        for (const Q of M) {
+          if (!Q.code) continue;
+          const Be = Re(Q.language);
+          let Fe = (Q.title || "untitled").toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-_]/g, ""), We = `${Fe}.${Be}`;
+          const ze = S.get(We) || 0;
+          ze > 0 && (We = `${Fe}-${ze}.${Be}`), S.set(`${Fe}.${Be}`, ze + 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);
+      } catch (m) {
+        console.error("Failed to create ZIP:", m);
+      } finally {
+        ae(!1);
+      }
+    }
+  }, [X, M]), Se = d(() => {
+    Z > 0 && x(M[Z - 1]);
+  }, [Z, x, M]), A = d(() => {
+    Z < M.length - 1 && x(M[Z + 1]);
+  }, [Z, x, M]), Ie = d((m) => {
+    te(!0), x(m), J(!1);
+  }, [x]), o = d((m) => {
+    i.current = {
+      startX: m.clientX,
+      startWidth: V
+    }, document.addEventListener("mousemove", I), document.addEventListener("mouseup", B), document.body.style.cursor = "ew-resize", document.body.style.userSelect = "none", document.querySelectorAll("iframe").forEach((S) => {
+      S.style.pointerEvents = "none";
+    });
+  }, [V]), I = d((m) => {
+    if (!i.current) return;
+    const S = window.innerWidth, O = (i.current.startX - m.clientX) / S * 100, he = i.current.startWidth + O;
+    ie(Math.min(Math.max(he, 25), 75));
+  }, []), B = d(() => {
+    i.current = null, document.removeEventListener("mousemove", I), document.removeEventListener("mouseup", B), document.body.style.cursor = "", document.body.style.userSelect = "", document.querySelectorAll("iframe").forEach((m) => {
+      m.style.pointerEvents = "";
+    });
+  }, [I]), j = d((m) => {
+    if (!f.current) return;
+    const S = f.current.getBoundingClientRect();
+    w.current = {
+      startX: m.clientX,
+      startPosition: ee,
+      contentLeft: S.left,
+      contentWidth: S.width
+    }, document.addEventListener("mousemove", ce), document.addEventListener("mouseup", be), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.querySelectorAll("iframe").forEach((G) => {
+      G.style.pointerEvents = "none";
+    });
+  }, [ee]), ce = d((m) => {
+    if (!w.current) return;
+    const G = (m.clientX - w.current.contentLeft) / w.current.contentWidth * 100;
+    oe(Math.min(Math.max(G, 20), 80));
+  }, []), be = d(() => {
+    w.current = null, document.removeEventListener("mousemove", ce), document.removeEventListener("mouseup", be), document.body.style.cursor = "", document.body.style.userSelect = "", document.querySelectorAll("iframe").forEach((m) => {
+      m.style.pointerEvents = "";
+    });
+  }, [ce]);
+  if (z(() => {
+    r && (U(!0), $e(), Ee());
+  }, [r == null ? void 0 : r.id]), z(() => {
+    (s.viewMode === "code" || s.viewMode === "split") && Ee();
+  }, [s.viewMode, Ee]), z(() => (t && _.on("ai:request", t), a && _.on("save:request", a), n && _.on("export:complete", n), () => {
+    t && _.off("ai:request", t), a && _.off("save:request", a), n && _.off("export:complete", n);
+  }), [_, t, a, n]), z(() => () => {
+    B(), be(), clearTimeout(y.current), clearTimeout(N.current), clearTimeout(T.current);
+  }, [B, be]), !s.isPanelOpen) return null;
+  const He = [
+    "artifactuse-panel",
+    s.isFullscreen && "artifactuse-panel--fullscreen",
+    !r && u && "artifactuse-panel--list",
+    !u && "artifactuse-panel--empty",
+    l
+  ].filter(Boolean).join(" "), Xe = [
+    "artifactuse-panel__content",
+    `artifactuse-panel__content--${s.viewMode}`
+  ].join(" ");
+  return u ? r ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: He,
+      style: s.isFullscreen ? void 0 : { width: `${V}%` }
+    },
+    !s.isFullscreen && /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: "artifactuse-panel__resize-handle",
+        onMouseDown: o
+      },
+      /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle-line" })
+    ),
+    /* @__PURE__ */ e.createElement("header", { className: "artifactuse-panel__header" }, fe && /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        className: "artifactuse-panel__back",
+        title: "Back to list",
+        onClick: Le
+      },
+      /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "15 18 9 12 15 6" }))
+    ), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__title" }, /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        className: "artifactuse-panel__icon",
+        dangerouslySetInnerHTML: { __html: `<svg viewBox="0 0 24 24" fill="currentColor">${ge}</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",
+      {
+        className: `artifactuse-panel__tab ${s.viewMode === "preview" ? "artifactuse-panel__tab--active" : ""}`,
+        disabled: !r.isPreviewable,
+        title: "Preview",
+        onClick: () => b("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(
+      "button",
+      {
+        className: `artifactuse-panel__tab ${s.viewMode === "code" ? "artifactuse-panel__tab--active" : ""}`,
+        title: "Code",
+        onClick: () => b("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(
+      "button",
+      {
+        className: `artifactuse-panel__tab ${s.viewMode === "split" ? "artifactuse-panel__tab--active" : ""}`,
+        disabled: !r.isPreviewable,
+        title: "Split view",
+        onClick: () => b("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(
+      "button",
+      {
+        className: "artifactuse-panel__action",
+        title: s.isFullscreen ? "Exit fullscreen" : "Fullscreen",
+        onClick: c
+      },
+      s.isFullscreen ? /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "4 14 10 14 10 20" }), /* @__PURE__ */ e.createElement("polyline", { points: "20 10 14 10 14 4" }), /* @__PURE__ */ e.createElement("line", { x1: "14", y1: "10", x2: "21", y2: "3" }), /* @__PURE__ */ e.createElement("line", { x1: "3", y1: "21", x2: "10", y2: "14" })) : /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "15 3 21 3 21 9" }), /* @__PURE__ */ e.createElement("polyline", { points: "9 21 3 21 3 15" }), /* @__PURE__ */ e.createElement("line", { x1: "21", y1: "3", x2: "14", y2: "10" }), /* @__PURE__ */ e.createElement("line", { x1: "3", y1: "21", x2: "10", y2: "14" }))
+    ), /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        className: "artifactuse-panel__action artifactuse-panel__action--close",
+        title: "Close",
+        onClick: g
+      },
+      /* @__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: Xe, ref: f }, (s.viewMode === "preview" || s.viewMode === "split") && /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: "artifactuse-panel__preview",
+        style: s.viewMode === "split" ? { width: `${ee}%` } : void 0
+      },
+      K && pe && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__loading" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__spinner" })),
+      pe ? /* @__PURE__ */ e.createElement(
+        "iframe",
+        {
+          ref: E,
+          src: pe,
+          className: `artifactuse-panel__iframe ${K ? "artifactuse-panel__iframe--loading" : ""}`,
+          sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-modals",
+          onLoad: Te,
+          onError: Me
+        }
+      ) : /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__no-preview" }, /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }, /* @__PURE__ */ e.createElement("path", { d: "M9 17H7A5 5 0 0 1 7 7h2" }), /* @__PURE__ */ e.createElement("path", { d: "M15 7h2a5 5 0 1 1 0 10h-2" }), /* @__PURE__ */ e.createElement("line", { x1: "8", y1: "12", x2: "16", y2: "12" })), /* @__PURE__ */ e.createElement("p", null, "Preview not available for ", Y))
+    ), (s.viewMode === "code" || s.viewMode === "split") && /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: "artifactuse-panel__code",
+        style: s.viewMode === "split" ? { width: `${100 - ee}%` } : void 0
+      },
+      s.viewMode === "split" && /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          className: "artifactuse-panel__split-handle",
+          onMouseDown: j
+        },
+        /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__split-handle-line" })
+      ),
+      /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__code-scroll", ref: F }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__line-numbers", ref: v }), /* @__PURE__ */ e.createElement("pre", { className: "artifactuse-panel__code-block" }, /* @__PURE__ */ e.createElement(
+        "code",
+        {
+          ref: k,
+          className: `language-${Ce}`
+        },
+        r.code
+      )))
+    )),
+    /* @__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",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "artifactuse-panel__branding",
+        title: "Powered by Artifactuse"
+      },
+      /* @__PURE__ */ e.createElement("svg", { width: "16", height: "16", viewBox: "0 0 32 32", fill: "currentColor" }, /* @__PURE__ */ e.createElement("path", { d: "M16 2L2 9l14 7 14-7-14-7zM2 23l14 7 14-7M2 16l14 7 14-7" })),
+      /* @__PURE__ */ e.createElement("span", null, "Artifactuse")
+    ), r.code && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__badge artifactuse-panel__badge--secondary" }, je(new Blob([r.code]).size))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__footer-right" }, /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        className: `artifactuse-panel__footer-action ${D ? "artifactuse-panel__footer-action--success" : ""}`,
+        title: D ? "Copied!" : "Copy code",
+        onClick: h
+      },
+      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(
+      "button",
+      {
+        className: "artifactuse-panel__footer-action",
+        title: "Download",
+        onClick: ve
+      },
+      /* @__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" }))
+    ), M.length > 1 && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__nav" }, /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        className: "artifactuse-panel__nav-btn",
+        disabled: Z <= 0,
+        title: "Previous artifact",
+        onClick: Se
+      },
+      /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "15 18 9 12 15 6" }))
+    ), /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        className: "artifactuse-panel__nav-trigger",
+        onClick: () => J(!L)
+      },
+      /* @__PURE__ */ e.createElement("span", null, Z + 1, " / ", M.length),
+      /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("polyline", { points: "6 9 12 15 18 9" }))
+    ), /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        className: "artifactuse-panel__nav-btn",
+        disabled: Z >= M.length - 1,
+        title: "Next artifact",
+        onClick: A
+      },
+      /* @__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" }))
+    ), L && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__artifact-list" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__artifact-list-header" }, /* @__PURE__ */ e.createElement("span", null, "All Artifacts (", M.length, ")"), /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        className: "artifactuse-panel__artifact-list-close",
+        onClick: () => J(!1)
+      },
+      /* @__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__artifact-list-items" }, M.map((m, S) => /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        key: m.id,
+        className: `artifactuse-panel__artifact-item ${m.id === r.id ? "artifactuse-panel__artifact-item--active" : ""}`,
+        onClick: () => Ie(m)
+      },
+      /* @__PURE__ */ e.createElement(
+        "span",
+        {
+          className: "artifactuse-panel__artifact-item-icon",
+          dangerouslySetInnerHTML: { __html: re(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" }, we(m.language), m.lineCount && ` • ${m.lineCount} lines`)),
+      /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel__artifact-item-index" }, S + 1)
+    )))))))
+  ), s.isFullscreen && /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: "artifactuse-panel__backdrop",
+      onClick: g
+    }
+  )) : /* @__PURE__ */ e.createElement("div", { className: He, style: s.isFullscreen ? void 0 : { width: `${ye}%` } }, !s.isFullscreen && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle", onMouseDown: o }, /* @__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" }, M.length, " available"))), /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__actions" }, /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      className: `artifactuse-panel__action ${X ? "artifactuse-panel__action--loading" : ""}`,
+      disabled: X,
+      title: "Download all as ZIP",
+      onClick: Ae
+    },
+    X ? /* @__PURE__ */ e.createElement("svg", { className: "artifactuse-panel__spinner-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "32", strokeDashoffset: "32" })) : /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ e.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), /* @__PURE__ */ e.createElement("polyline", { points: "7 10 12 15 17 10" }), /* @__PURE__ */ e.createElement("line", { x1: "12", y1: "15", x2: "12", y2: "3" }))
+  ), /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      className: "artifactuse-panel__action artifactuse-panel__action--close",
+      title: "Close panel",
+      onClick: g
+    },
+    /* @__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__list" }, /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__list-items" }, M.map((m, S) => /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      key: m.id,
+      className: "artifactuse-panel__list-item",
+      onClick: () => Ie(m)
+    },
+    /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        className: "artifactuse-panel__list-item-icon",
+        dangerouslySetInnerHTML: { __html: re(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" }, we(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" }, me && /* @__PURE__ */ e.createElement(
+    "a",
+    {
+      href: "https://artifactuse.com",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "artifactuse-panel__branding"
+    },
+    /* @__PURE__ */ e.createElement("svg", { width: "16", height: "16", viewBox: "0 0 32 32", fill: "currentColor" }, /* @__PURE__ */ e.createElement("path", { d: "M16 2L2 9l14 7 14-7-14-7zM2 23l14 7 14-7M2 16l14 7 14-7" })),
+    /* @__PURE__ */ e.createElement("span", null, "Artifactuse")
+  ))) : /* @__PURE__ */ e.createElement("div", { className: He, style: s.isFullscreen ? void 0 : { width: `${ye}%` } }, !s.isFullscreen && /* @__PURE__ */ e.createElement("div", { className: "artifactuse-panel__resize-handle", onMouseDown: o }, /* @__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",
+      title: "Close panel",
+      onClick: g
+    },
+    /* @__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" }, me && /* @__PURE__ */ e.createElement(
+    "a",
+    {
+      href: "https://artifactuse.com",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "artifactuse-panel__branding"
+    },
+    /* @__PURE__ */ e.createElement("svg", { width: "16", height: "16", viewBox: "0 0 32 32", fill: "currentColor" }, /* @__PURE__ */ e.createElement("path", { d: "M16 2L2 9l14 7 14-7-14-7zM2 23l14 7 14-7M2 16l14 7 14-7" })),
+    /* @__PURE__ */ e.createElement("span", null, "Artifactuse")
+  )));
+}
+function Tt({ className: t = "" }) {
+  const { state: a, artifactCount: n, hasArtifacts: l, togglePanel: s } = de(), r = $(() => n > 99 ? "99+" : String(n), [n]), p = [
+    "artifactuse-panel-toggle",
+    a.isPanelOpen && "artifactuse-panel-toggle--active",
+    l && "artifactuse-panel-toggle--has-artifacts",
+    t
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      className: p,
+      onClick: s,
+      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" })),
+    n > 0 && /* @__PURE__ */ e.createElement("span", { className: "artifactuse-panel-toggle-badge" }, r)
+  );
+}
+const Je = Ze(null);
+function Nt({ children: t, config: a = {} }) {
+  const n = W(null);
+  n.current || (n.current = Qe(a));
+  const l = n.current, [s, r] = C({
+    artifacts: [],
+    activeArtifactId: null,
+    isPanelOpen: !1,
+    viewMode: "preview",
+    isFullscreen: !1
+  }), [p, u] = C(() => l.getPanelTypes());
+  z(() => {
+    const f = l.state.subscribe((v) => {
+      r({
+        artifacts: v.artifacts,
+        activeArtifactId: v.activeArtifactId,
+        isPanelOpen: v.isPanelOpen,
+        viewMode: v.viewMode,
+        isFullscreen: v.isFullscreen
+      });
+    });
+    return l.applyTheme(), () => {
+      f(), l.destroy();
+    };
+  }, [l]);
+  const g = $(() => s.activeArtifactId && s.artifacts.find((f) => f.id === s.activeArtifactId) || null, [s.artifacts, s.activeArtifactId]), c = s.artifacts.length, b = c > 0, P = $(() => g ? l.getPanelUrl(g) : null, [g, l]), x = d((f) => {
+    l.setTheme(f), l.applyTheme();
+  }, [l]), _ = d((f, v) => {
+    l.registerPanel(f, v), u(l.getPanelTypes());
+  }, [l]), E = d((f) => {
+    l.unregisterPanel(f), u(l.getPanelTypes());
+  }, [l]), k = $(() => ({
+    instance: l,
+    state: s,
+    activeArtifact: g,
+    artifactCount: c,
+    hasArtifacts: b,
+    // 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,
+    // Panel management
+    hasPanel: l.hasPanel,
+    registerPanel: _,
+    unregisterPanel: E,
+    getPanelTypes: l.getPanelTypes,
+    // Events
+    on: l.on,
+    off: l.off,
+    // Theme
+    applyTheme: l.applyTheme,
+    setTheme: x,
+    getTheme: l.getTheme
+  }), [
+    l,
+    s,
+    g,
+    c,
+    b,
+    p,
+    P,
+    x,
+    _,
+    E
+  ]);
+  return /* @__PURE__ */ e.createElement(Je.Provider, { value: k }, t);
+}
+function de() {
+  const t = Ke(Je);
+  if (!t)
+    throw new Error("useArtifactuse must be used within an ArtifactuseProvider");
+  return t;
+}
+function bt(t, a) {
+  const { on: n, off: l } = de();
+  z(() => {
+    const s = n(t, a);
+    return () => {
+      typeof s == "function" ? s() : l(t, a);
+    };
+  }, [t, a, n, l]);
+}
+function kt() {
+  const {
+    registerPanel: t,
+    unregisterPanel: a,
+    hasPanel: n,
+    panelTypes: l,
+    instance: s
+  } = de(), r = d((u) => n({ type: u }), [n]), p = d((u, g = {}) => {
+    var c;
+    return ((c = s.panelResolver) == null ? void 0 : c.resolve(u, g)) || null;
+  }, [s]);
+  return {
+    register: t,
+    unregister: a,
+    isRegistered: r,
+    getPanelUrl: p,
+    types: l,
+    defaults: Oe
+  };
+}
+const Mt = {
+  ArtifactuseProvider: Nt,
+  useArtifactuse: de,
+  useArtifactuseEvent: bt,
+  usePanelRegistry: kt,
+  DEFAULT_PANELS: Oe
+};
+export {
+  _t as ArtifactuseAgentMessage,
+  at as ArtifactuseCard,
+  nt as ArtifactuseInlineForm,
+  Pt as ArtifactusePanel,
+  Tt as ArtifactusePanelToggle,
+  Nt as ArtifactuseProvider,
+  Et as ArtifactuseSocialPreview,
+  vt as ArtifactuseViewer,
+  Oe as DEFAULT_PANELS,
+  Mt as default,
+  de as useArtifactuse,
+  bt as useArtifactuseEvent,
+  kt as usePanelRegistry
+};