@useinsider/guido 3.19.0-beta.2854f4f → 3.19.0-beta.4b9be3a

package/dist/composables/useActionsApi.js

@@ -1,17 +1,21 @@
 import { filterAmpErrors as v } from "../utils/ampErrorFilter.js";
 import { useToaster as y } from "./useToaster.js";
-const D = 1e4, d = 3e4, s = (n, l, u) => new Promise((T, m) => {
-  const w = setTimeout(
-    () => m(new Error(`${n} did not report completion within ${l}ms`)),
+const D = 1e4, T = 3e4, p = (n, l, w) => new Promise((A, s) => {
+  const c = setTimeout(
+    () => s(new Error(`${n} did not report completion within ${l}ms`)),
     l
-  ), p = (A) => (t) => {
-    clearTimeout(w), A(t);
+  ), d = (r) => (t) => {
+    clearTimeout(c), r(t);
   };
-  u(p(T), p(m));
+  try {
+    w(d(A), d(s));
+  } catch (r) {
+    clearTimeout(c), s(r instanceof Error ? r : new Error(String(r)));
+  }
 }), I = () => {
-  const { handleError: n } = y(), l = (t = {}) => s(
+  const { handleError: n } = y(), l = (t = {}) => p(
     "compileEmail",
-    d,
+    T,
     (e, a) => {
       const o = { ...{
         minimize: !0,
@@ -32,9 +36,9 @@ const D = 1e4, d = 3e4, s = (n, l, u) => new Promise((T, m) => {
         forceAmp: !1,
         resetDataSavedFlag: !1,
         disableLineHeightsReplace: !0
-      }, ...t }, c = {
-        callback: (r, C, f, S, g) => {
-          r ? a(r) : e({
+      }, ...t }, u = {
+        callback: (m, C, f, S, g) => {
+          m ? a(m) : e({
             html: C,
             ampHtml: f,
             ampErrors: v(S ?? []),
@@ -43,22 +47,22 @@ const D = 1e4, d = 3e4, s = (n, l, u) => new Promise((T, m) => {
         },
         ...o
       };
-      window.StripoEditorApi.actionsApi.compileEmail(c);
+      window.StripoEditorApi.actionsApi.compileEmail(u);
     }
   );
   return {
     getCompiledEmail: l,
-    getTemplateData: () => s(
+    getTemplateData: () => p(
       "getTemplateData",
-      d,
+      T,
       (t) => {
-        const e = ({ html: a, css: i, width: o, height: E, utmParams: c, syncModulesIds: r }) => t({
+        const e = ({ html: a, css: i, width: o, height: E, utmParams: u, syncModulesIds: m }) => t({
           html: a,
           css: i,
           width: o,
           height: E,
-          utmParams: c,
-          syncModulesIds: r
+          utmParams: u,
+          syncModulesIds: m
         });
         window.StripoEditorApi.actionsApi.getTemplateData(e);
       }
@@ -105,13 +109,13 @@ const D = 1e4, d = 3e4, s = (n, l, u) => new Promise((T, m) => {
     }),
     updateHtmlAndCss: (t, e) => {
       const { actionsApi: a } = window.StripoEditorApi;
-      return s("updateHtmlAndCss", D, (i) => {
+      return p("updateHtmlAndCss", D, (i) => {
         a.updateHtmlAndCss(t, e, () => i());
       });
     },
-    editorSave: () => s(
+    editorSave: () => p(
       "save",
-      d,
+      T,
       (t) => {
         window.StripoEditorApi.actionsApi.save((e) => {
           if (e) {

package/dist/composables/useCortexBlueprintBridge.js

@@ -1,70 +1,136 @@
-import { useEmailTemplateApplier as w, resetEmailTemplateApplier as _ } from "./useEmailTemplateApplier.js";
-import { useToaster as I } from "./useToaster.js";
-import { useTranslations as P } from "./useTranslations.js";
-import { ToasterTypeOptions as S } from "../enums/toaster.js";
-import { getActivePinia as v } from "pinia";
-import { watch as B, onUnmounted as D } from "vue";
-const x = "email_template", L = "chat", M = "guido:debug:ai", R = () => {
+import { useEmailTemplateApplier as z, resetEmailTemplateApplier as J } from "./useEmailTemplateApplier.js";
+import { useToaster as Q } from "./useToaster.js";
+import { useTranslations as V } from "./useTranslations.js";
+import { ToasterTypeOptions as Z } from "../enums/toaster.js";
+import { useGuidoEmailEditorStore as W } from "../stores/guido-email-editor.js";
+import { getActivePinia as k } from "pinia";
+import { onUnmounted as tt, watch as et } from "vue";
+const rt = "email_template", nt = "chat", it = "guido:debug:ai", ot = 2, lt = 500, ct = (E, u) => `${E}:${u ?? 1}`;
+let y = null;
+const at = () => {
   if (typeof window > "u")
     return !1;
   try {
-    return window.localStorage.getItem(M) === "1";
+    return window.localStorage.getItem(it) === "1";
   } catch {
     return !1;
   }
-}, H = () => {
-  const c = v();
-  if (!c)
+}, Et = () => {
+  const E = k();
+  if (!E)
     return;
-  const l = c._s, p = l == null ? void 0 : l.get(L);
-  if (!p)
-    return;
-  const { markPending: d, applyTemplate: f, applyTemplateDebounced: T } = w(), { showToaster: E } = I(), h = P(), y = (r, t) => {
-    const e = h(r);
-    return e === r ? t : e;
-  }, i = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Set(), u = R(), A = (r, t) => {
-    u && console.debug(`[guido:cortex] msg=${r ?? "?"} type=${(t == null ? void 0 : t.type) ?? "?"}`, t);
-  }, b = (r) => {
-    if (r.blueprintType !== x)
+  const u = W(), M = Symbol("cortexBlueprintBridge");
+  y = M, u.$patch((t) => {
+    t.bridgeActive = !0;
+  });
+  const { markPending: F, applyTemplate: H, applyTemplateDebounced: O } = z(), { showToaster: C } = Q(), G = V(), b = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map();
+  let s = null;
+  const d = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Set(), D = at();
+  let w = null, m = null, A;
+  const K = (t, r) => {
+    D && console.debug(`[guido:cortex] msg=${t ?? "?"} type=${(r == null ? void 0 : r.type) ?? "?"}`, r);
+  }, U = () => new Set((A == null ? void 0 : A.appliedBlueprintKeys) ?? []), Y = (t) => t instanceof Error ? t.message : String(t), B = (t, r, n, e) => {
+    if (y !== M)
+      return;
+    const i = u.applyAcks[t], c = Math.max(Date.now(), ((i == null ? void 0 : i.ackAt) ?? 0) + 1), a = { status: r, requestedAt: n, ackAt: c };
+    e !== void 0 && (a.error = Y(e)), u.$patch((o) => {
+      o.applyAcks = { ...o.applyAcks, [t]: a };
+    });
+  }, I = (t) => (d.get(t) ?? 0) > 0, P = (t) => (s == null ? void 0 : s.key) === t, v = async (t, r, n) => {
+    var a, o, h;
+    const e = ((a = r.blueprintData) == null ? void 0 : a.html) ?? "", i = ((o = r.blueprintData) == null ? void 0 : o.css) ?? "", c = r.applyRequestedAt ?? 0;
+    d.set(t, (d.get(t) ?? 0) + 1);
+    try {
+      const l = n === "debounced" ? await O(t, { html: e, css: i }) : await H(t, { html: e, css: i });
+      if (l.status === "superseded")
+        return;
+      if (l.status === "applied") {
+        b.set(t, e), p.delete(t), B(t, "applied", c);
+        return;
+      }
+      const S = p.get(t), j = (S == null ? void 0 : S.html) === e ? S.count + 1 : 1;
+      p.set(t, { html: e, count: j }), B(t, "failed", c, l.error);
+    } finally {
+      d.set(t, (d.get(t) ?? 1) - 1);
+      const l = T.get(t);
+      l && !I(t) && (T.delete(t), P(t) && (((h = l.blueprintData) == null ? void 0 : h.html) ?? "") !== e && v(t, l, n));
+    }
+  }, N = (t) => {
+    var h;
+    if (t.blueprintType !== rt)
       return;
-    const t = r.blueprintId, e = r.blueprintData;
-    if (!t || !(e != null && e.html))
+    const { blueprintId: r } = t, n = (h = t.blueprintData) == null ? void 0 : h.html;
+    if (!r || !n)
       return;
-    if (!r.applyRequested) {
-      d(t);
+    const e = ct(r, t.version);
+    if (!t.applyRequested) {
+      F(e);
+      return;
+    }
+    const i = t.applyRequestedAt ?? 0, c = _.get(e);
+    if (c === void 0 || i > c) {
+      const l = c === void 0;
+      if (_.set(e, i), p.delete(e), (!s || i >= s.requestedAt) && (s = { key: e, requestedAt: i }), l && U().has(e)) {
+        b.set(e, n);
+        return;
+      }
+      v(e, t, "immediate");
+      return;
+    }
+    const a = b.get(e);
+    if (a === n || !P(e))
       return;
+    const o = p.get(e);
+    if (!((o == null ? void 0 : o.html) === n && o.count >= ot)) {
+      if (a === void 0) {
+        if (I(e)) {
+          T.set(e, t);
+          return;
+        }
+        v(e, t, "immediate");
+        return;
+      }
+      f.get(e) !== n && (f.set(e, n), v(e, t, "debounced").finally(() => {
+        f.get(e) === n && f.delete(e);
+      }));
     }
-    const o = i.get(t);
-    o === void 0 ? (i.set(t, e.html), f(t, e)) : o !== e.html && (i.set(t, e.html), T(t, e));
-  }, s = (r) => r === void 0 || a.has(r) ? !1 : (a.add(r), E({
-    type: S.Error,
-    message: y("newsletter.ai-template-failed", "AI couldn't generate the template. Please try again.")
-  }), !0), m = B(
-    () => p.messages,
-    (r) => {
-      Array.isArray(r) && r.forEach((t) => {
-        const e = t == null ? void 0 : t.id;
-        (t == null ? void 0 : t.isError) === !0 && s(e) && u && console.debug(`[guido:cortex] message-level error id=${e}`, t);
-        const o = t == null ? void 0 : t.segments;
-        Array.isArray(o) && o.forEach((n) => {
-          if (n)
-            switch (A(e, n), n.type) {
-              case "blueprint":
-                b(n);
-                break;
-              case "error":
-                s(e);
-                break;
-            }
-        });
+  }, R = (t) => t === void 0 || g.has(t) ? !1 : (g.add(t), C({
+    type: Z.Error,
+    message: G("newsletter.ai-template-failed")
+  }), !0), X = (t) => {
+    Array.isArray(t) && t.forEach((r) => {
+      const n = r == null ? void 0 : r.id;
+      (r == null ? void 0 : r.isError) === !0 && R(n) && D && console.debug(`[guido:cortex] message-level error id=${n}`, r);
+      const e = r == null ? void 0 : r.segments;
+      Array.isArray(e) && e.forEach((i) => {
+        if (i)
+          switch (K(n, i), i.type) {
+            case "blueprint":
+              N(i);
+              break;
+            case "error":
+              R(n);
+              break;
+          }
       });
-    },
-    { deep: !0, immediate: !0 }
-  );
-  D(() => {
-    m(), i.clear(), a.clear(), _();
+    });
+  }, $ = () => {
+    w !== null && (clearInterval(w), w = null);
+  }, q = () => {
+    var t;
+    return (t = E._s) == null ? void 0 : t.get(nt);
+  }, L = (t) => {
+    A = t, m = et(() => t.messages, X, { deep: !0, immediate: !0 });
+  }, x = q();
+  x ? L(x) : w = setInterval(() => {
+    const t = q();
+    t && ($(), L(t));
+  }, lt), tt(() => {
+    $(), m == null || m(), A = void 0, b.clear(), f.clear(), _.clear(), p.clear(), s = null, d.clear(), T.clear(), g.clear(), y === M && (y = null, u.$patch((t) => {
+      t.bridgeActive = !1, t.applyAcks = {};
+    }), J());
   });
 };
 export {
-  H as useCortexBlueprintBridge
+  Et as useCortexBlueprintBridge
 };

package/dist/composables/useCustomInterfaceAppearance.js

@@ -1,77 +1,67 @@
-import p from "../static/assets/icons/line-change.svg.js";
-import s from "../static/assets/icons/line-delete.svg.js";
-import a from "../static/assets/icons/line-plus.svg.js";
-import f from "../static/styles/base.css.js";
-import C from "../static/styles/components/alert-message.css.js";
-import c from "../static/styles/components/amp-block.css.js";
-import l from "../static/styles/components/base-input.css.js";
-import d from "../static/styles/components/button-group.css.js";
-import u from "../static/styles/components/button.css.js";
-import h from "../static/styles/components/combobox.css.js";
-import g from "../static/styles/components/counter.css.js";
-import w from "../static/styles/components/dropdown-menu.css.js";
-import y from "../static/styles/components/loader.css.js";
-import I from "../static/styles/components/narrow-panel.css.js";
-import A from "../static/styles/components/popup.css.js";
-import b from "../static/styles/components/recommendation-strategy.css.js";
-import B from "../static/styles/components/skeleton.css.js";
-import D from "../static/styles/components/switcher.css.js";
-import $ from "../static/styles/components/tabs.css.js";
-import P from "../static/styles/components/tools.css.js";
-import R from "../static/styles/components/version-history.css.js";
-import T from "../static/styles/components/wide-panel.css.js";
+import S from "../static/assets/icons/line-change.svg.js";
+import i from "../static/assets/icons/line-delete.svg.js";
+import n from "../static/assets/icons/line-plus.svg.js";
+import p from "../static/styles/base.css.js";
+import s from "../static/styles/components/alert-message.css.js";
+import C from "../static/styles/components/amp-block.css.js";
+import a from "../static/styles/components/base-input.css.js";
+import f from "../static/styles/components/button-group.css.js";
+import c from "../static/styles/components/button.css.js";
+import u from "../static/styles/components/combobox.css.js";
+import l from "../static/styles/components/counter.css.js";
+import d from "../static/styles/components/dropdown-menu.css.js";
+import h from "../static/styles/components/loader.css.js";
+import g from "../static/styles/components/narrow-panel.css.js";
+import I from "../static/styles/components/popup.css.js";
+import w from "../static/styles/components/recommendation-strategy.css.js";
+import y from "../static/styles/components/switcher.css.js";
+import b from "../static/styles/components/tabs.css.js";
+import B from "../static/styles/components/tools.css.js";
+import $ from "../static/styles/components/version-history.css.js";
+import P from "../static/styles/components/wide-panel.css.js";
 import x from "../static/styles/variables.css.js";
-function r(S, o) {
-  return `--guido-icon-${S}: url("data:image/svg+xml,${encodeURIComponent(o.trim())}");`;
+function r(t, o) {
+  return `--guido-icon-${t}: url("data:image/svg+xml,${encodeURIComponent(o.trim())}");`;
 }
-const M = `:host {
-    ${r("line-change", p)}
-    ${r("line-delete", s)}
-    ${r("line-plus", a)}
-}`, O = [
+const A = `:host {
+    ${r("line-change", S)}
+    ${r("line-delete", i)}
+    ${r("line-plus", n)}
+}`, R = [
   x,
   // Must be on top
-  M,
-  f,
+  A,
+  p,
   // Must be on top
+  s,
   C,
+  a,
+  f,
   c,
+  u,
   l,
   d,
-  u,
   h,
   g,
-  w,
-  y,
   I,
-  A,
+  y,
+  b,
   B,
-  D,
   $,
   P,
-  R,
-  T,
-  b
+  w
   // Last: overrides button.css / wide-panel.css defaults
 ].join(`
 
-`), V = 3e4;
-let e = null;
-function W() {
-  return e || (e = new CSSStyleSheet(), e.replaceSync(O)), e;
-}
-const So = () => ({ importCss: () => {
-  const o = W(), i = Date.now() + V, m = () => {
-    var n;
-    const t = (n = document.querySelector("ui-editor")) == null ? void 0 : n.shadowRoot;
-    if (t) {
-      t.adoptedStyleSheets.includes(o) || (t.adoptedStyleSheets = [...t.adoptedStyleSheets, o]);
-      return;
-    }
-    Date.now() < i && requestAnimationFrame(m);
-  };
-  m();
+`), Y = () => ({ importCss: () => {
+  const o = new CSSStyleSheet();
+  o.replaceSync(R);
+  const e = document.querySelector("ui-editor");
+  if (!e)
+    return;
+  const m = e.shadowRoot;
+  m && (m.adoptedStyleSheets = [o]);
 } });
 export {
-  So as useCustomInterfaceAppearance
+  Y as useCustomInterfaceAppearance
 };

package/dist/composables/useEmailTemplateApplier.js

@@ -1,59 +1,104 @@
-import { useActionsApi as C } from "./useActionsApi.js";
-import { useConfig as h } from "./useConfig.js";
-import { useToaster as D } from "./useToaster.js";
-import { useTranslations as E } from "./useTranslations.js";
-import { ToasterTypeOptions as f } from "../enums/toaster.js";
-import { useDynamicContentStore as A } from "../stores/dynamic-content.js";
-import { flattenDynamicContentList as w } from "../utils/genericUtil.js";
-import { extractUsedDynamicContent as S } from "../utils/registerUsedDynamicContent.js";
-import { ref as O } from "vue";
-const U = 250, o = O({}), s = {}, u = /* @__PURE__ */ new Map(), z = () => {
-  const { updateHtmlAndCss: r } = C(), { showToaster: m } = D(), y = E(), { template: T } = h(), d = A(), g = (e, t) => {
-    const a = y(e);
-    return a === e ? t : a;
-  }, v = (e) => {
-    o.value[e] === void 0 && (o.value = { ...o.value, [e]: "pending" });
-  }, l = (e, t, a) => {
-    var c;
-    o.value = { ...o.value, [e]: "applying" };
+import { useActionsApi as x } from "./useActionsApi.js";
+import { useConfig as z } from "./useConfig.js";
+import { useEditorLock as I } from "./useEditorLock.js";
+import { useToaster as N } from "./useToaster.js";
+import { useTranslations as q } from "./useTranslations.js";
+import { ToasterTypeOptions as D } from "../enums/toaster.js";
+import { useDynamicContentStore as K } from "../stores/dynamic-content.js";
+import { useEditorStore as R } from "../stores/editor.js";
+import { flattenDynamicContentList as F } from "../utils/genericUtil.js";
+import { extractUsedDynamicContent as G } from "../utils/registerUsedDynamicContent.js";
+import { ref as $, watch as j } from "vue";
+const J = 250, h = 12e4, p = { status: "superseded" }, S = { status: "failed", error: new Error("Blueprint has no html to apply") }, a = $({}), v = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map(), ce = () => {
+  const { updateHtmlAndCss: i } = x(), { runExclusive: A } = I(), { showToaster: f } = N(), E = q(), { template: M } = z(), U = K(), T = R(), w = (e, t) => {
+    m.get(e) !== t && (m.set(e, t), f({
+      type: D.Error,
+      message: E("newsletter.ai-template-failed-apply")
+    }));
+  }, O = () => {
+    var e, t;
+    return T.isStripoInitialized && typeof ((t = (e = window.StripoEditorApi) == null ? void 0 : e.actionsApi) == null ? void 0 : t.updateHtmlAndCss) == "function";
+  }, b = (e) => {
+    a.value[e] === void 0 && (a.value = { ...a.value, [e]: "pending" });
+  }, l = (e, t) => {
+    a.value = { ...a.value, [e]: t };
+  }, P = (e) => {
+    var t;
     try {
-      r(t, a).catch((n) => {
-        console.warn("Editor did not acknowledge the template apply.", n);
-      }), o.value = { ...o.value, [e]: "applied" };
-      try {
-        const n = w((c = T.value) == null ? void 0 : c.dynamicContentList), i = S(t, n);
-        i.length > 0 && d.registerDynamicContent(i);
-      } catch {
-      }
-      u.get(e) !== t && (u.set(e, t), m({
-        type: f.Success,
-        message: g("newsletter.ai-template-applied", "Template applied to the editor")
-      }));
-    } catch (n) {
-      o.value = { ...o.value, [e]: "failed" }, m({
-        type: f.Error,
-        message: n instanceof Error ? n.message : "Failed to apply template"
-      });
+      const r = F((t = M.value) == null ? void 0 : t.dynamicContentList), n = G(e, r);
+      n.length > 0 && U.registerDynamicContent(n);
+    } catch {
+    }
+  }, _ = (e, t) => {
+    m.delete(e), v.get(e) !== t && (v.set(e, t), f({
+      type: D.Success,
+      message: E("newsletter.ai-template-applied")
+    }));
+  }, g = async (e, t, r) => {
+    const n = (u.get(e) ?? 0) + 1;
+    u.set(e, n), l(e, "applying");
+    try {
+      await A(() => i(t, r));
+    } catch (o) {
+      return u.get(e) !== n ? p : (console.error("[guido:apply] editor did not acknowledge the template apply", o), l(e, "failed"), w(e, t), { status: "failed", error: o });
     }
-  }, p = (e) => {
-    const t = s[e];
-    t && (clearTimeout(t), delete s[e]);
+    return u.get(e) !== n ? p : (l(e, "applied"), P(t), _(e, t), { status: "applied" });
+  }, H = (e) => {
+    const t = s.get(e);
+    t && (clearTimeout(t.timer), s.delete(e), t.settle(p));
+  }, y = (e) => {
+    const t = c.get(e);
+    t && (clearTimeout(t.timer), c.delete(e), t.settle(p));
+  }, B = () => {
+    [...c.keys()].forEach(y);
+  }, L = (e, t, r) => new Promise((n) => {
+    H(e);
+    const o = setTimeout(() => {
+      s.delete(e), l(e, "failed"), w(e, t), n({
+        status: "failed",
+        error: new Error(`Editor did not become ready within ${h}ms`)
+      });
+    }, h);
+    s.set(e, { html: t, css: r, timer: o, settle: n }), l(e, "applying");
+  }), C = (e, t, r) => O() ? g(e, t, r) : L(e, t, r), Q = async () => {
+    if (s.size === 0)
+      return;
+    const e = [...s.entries()];
+    s.clear(), e.forEach(([, o]) => clearTimeout(o.timer));
+    const t = e.pop();
+    if (e.forEach(([o, d]) => {
+      l(o, "failed"), d.settle({ status: "failed", error: new Error("Displaced by a newer apply") });
+    }), !t)
+      return;
+    const [r, n] = t;
+    n.settle(await g(r, n.html, n.css));
   };
-  return { applyStatus: o, markPending: v, applyTemplate: (e, t) => {
-    t.html && (p(e), l(e, t.html, t.css ?? ""));
+  return j(() => T.isStripoInitialized, (e) => {
+    e && Q();
+  }, { immediate: !0 }), { applyStatus: a, markPending: b, applyTemplate: (e, t) => {
+    const { html: r } = t;
+    return r ? (B(), C(e, r, t.css ?? "")) : Promise.resolve(S);
   }, applyTemplateDebounced: (e, t) => {
-    if (!t.html)
-      return;
-    p(e);
-    const { html: a } = t, c = t.css ?? "";
-    s[e] = setTimeout(() => {
-      delete s[e], l(e, a, c);
-    }, U);
+    const { html: r } = t;
+    if (!r)
+      return Promise.resolve(S);
+    const n = t.css ?? "";
+    return new Promise((o) => {
+      y(e);
+      const d = setTimeout(() => {
+        c.delete(e), C(e, r, n).then(o);
+      }, J);
+      c.set(e, { timer: d, settle: o });
+    });
   } };
-}, G = () => {
-  Object.values(s).forEach(clearTimeout), Object.keys(s).forEach((r) => delete s[r]), o.value = {};
+}, le = () => {
+  c.forEach((i) => {
+    clearTimeout(i.timer), i.settle(p);
+  }), c.clear(), s.forEach((i) => {
+    clearTimeout(i.timer), i.settle(p);
+  }), s.clear(), u.clear(), m.clear(), a.value = {};
 };
 export {
-  G as resetEmailTemplateApplier,
-  z as useEmailTemplateApplier
+  le as resetEmailTemplateApplier,
+  ce as useEmailTemplateApplier
 };