@useinsider/guido 3.19.0-beta.5355c3f → 3.19.0-beta.5794c8d

package/dist/components/organisms/onboarding/RecommendationStrategyOnboarding.vue.js

@@ -0,0 +1,21 @@
+import d from "./RecommendationStrategyOnboarding.vue2.js";
+/* empty css                                      */
+import g from "../../../_virtual/_plugin-vue2_normalizer.js";
+var m = function() {
+  var e, n, r, i, a;
+  var t = this, s = t._self._c, o = t._self._setupProxy;
+  return o.isVisible ? s(o.InOnboard, { key: "guido__recommendation-strategy-onboard", staticClass: "w-21-s p-a z-11", class: (e = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : e.classes, attrs: { id: "guido__recommendation-strategy-onboard", "is-multiple-page": "", visible: "", "image-source": "", title: "", "left-position": (n = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : n.left, "pages-config": o.onboardingStore.onboardings.recommendationStrategyOnboarding.config, "pointer-position": (r = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : r.position, "right-position": (i = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : i.right, "top-position": (a = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : a.top }, on: { close: function(p) {
+    return o.onboardingStore.close(o.ONBOARDING_TYPE);
+  }, nextButtonClick: o.handleNext } }) : t._e();
+}, c = [], _ = /* @__PURE__ */ g(
+  d,
+  m,
+  c,
+  !1,
+  null,
+  "ec2027ff"
+);
+const S = _.exports;
+export {
+  S as default
+};

package/dist/components/organisms/onboarding/RecommendationStrategyOnboarding.vue2.js

@@ -0,0 +1,47 @@
+import { defineComponent as g, computed as p, watch as b } from "vue";
+import { useRibbonOffset as u } from "../../../composables/useRibbonOffset.js";
+import { useTranslations as l } from "../../../composables/useTranslations.js";
+import { ACADEMY_LINKS as f } from "../../../enums/academy.js";
+import { useRecommendationExtensionStore as O } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
+import { useOnboardingStore as _ } from "../../../stores/onboarding.js";
+import { InOnboard as y } from "@useinsider/design-system-vue";
+const h = /* @__PURE__ */ g({
+  __name: "RecommendationStrategyOnboarding",
+  setup(C) {
+    const n = "recommendationStrategyOnboarding", e = l(), t = _(), i = O(), { getTopPosition: r } = u(), a = `<a href="${f.EMAIL_RECOMMENDATION_BLOCK}" target="_blank" rel="noopener noreferrer">${e("action-builder.visit-academy")}</a>`, m = () => [
+      {
+        classes: "guido-recommendation-strategy-onboarding",
+        // Sits in the gap left of the settings panel and points at the strategy section, which
+        // starts 208px down: the panel header and its tab row are fixed chrome above it.
+        right: "426px",
+        top: r(208),
+        position: "Right Top",
+        title: e("email-editor.onboarding-recommendation-strategy-title"),
+        description: e("email-editor.onboarding-recommendation-strategy-description", {
+          academyLink: a
+        }),
+        imageSource: "",
+        backButtonClick: () => {
+        },
+        nextButtonType: "text",
+        nextButtonText: e("action-builder.ok"),
+        nextButtonClick: () => {
+          t.close(n);
+        }
+      }
+    ], c = p(() => i.strategyPanelOpen && t.onboardings.recommendationStrategyOnboarding.config.length > 0 && t.onboardings.recommendationStrategyOnboarding.isActive), d = () => {
+      var o, s;
+      (s = (o = t.getRecommendationStrategyCurrentCard) == null ? void 0 : o.nextButtonClick) == null || s.call(o);
+    };
+    return b(
+      () => t.isActive(n),
+      (o) => {
+        o && t.setConfig(n, m());
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, ONBOARDING_TYPE: n, trans: e, onboardingStore: t, recommendationStore: i, getTopPosition: r, academyLink: a, buildOnboardingCards: m, isVisible: c, handleNext: d, InOnboard: y };
+  }
+});
+export {
+  h as default
+};

package/dist/composables/useActionsApi.js

@@ -1,22 +1,23 @@
-import { filterAmpErrors as v } from "../utils/ampErrorFilter.js";
-import { useToaster as y } from "./useToaster.js";
-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`)),
+import { filterAmpErrors as y } from "../utils/ampErrorFilter.js";
+import { getEditorApi as s } from "../utils/stripoEditorApi.js";
+import { useToaster as D } from "./useToaster.js";
+const h = 1e4, T = 3e4, r = (n, l, A) => new Promise((C, p) => {
+  const f = setTimeout(
+    () => p(new Error(`${n} did not report completion within ${l}ms`)),
     l
-  ), d = (r) => (t) => {
-    clearTimeout(c), r(t);
-  };
+  ), c = (t) => (e) => {
+    clearTimeout(f), t(e);
+  }, d = c(p);
   try {
-    w(d(A), d(s));
-  } catch (r) {
-    clearTimeout(c), s(r instanceof Error ? r : new Error(String(r)));
+    A(c(C), d);
+  } catch (t) {
+    d(t);
   }
-}), I = () => {
-  const { handleError: n } = y(), l = (t = {}) => p(
+}), P = () => {
+  const { handleError: n } = D(), l = (t = {}) => r(
     "compileEmail",
     T,
-    (e, a) => {
+    (e, i) => {
       const o = { ...{
         minimize: !0,
         utmEntity: {
@@ -37,52 +38,52 @@ const D = 1e4, T = 3e4, p = (n, l, w) => new Promise((A, s) => {
         resetDataSavedFlag: !1,
         disableLineHeightsReplace: !0
       }, ...t }, u = {
-        callback: (m, C, f, S, g) => {
-          m ? a(m) : e({
-            html: C,
-            ampHtml: f,
-            ampErrors: v(S ?? []),
-            displayConditions: g
+        callback: (m, g, w, S, v) => {
+          m ? i(m) : e({
+            html: g,
+            ampHtml: w,
+            ampErrors: y(S ?? []),
+            displayConditions: v
           });
         },
         ...o
       };
-      window.StripoEditorApi.actionsApi.compileEmail(u);
+      s().actionsApi.compileEmail(u);
     }
   );
   return {
     getCompiledEmail: l,
-    getTemplateData: () => p(
+    getTemplateData: () => r(
       "getTemplateData",
       T,
       (t) => {
-        const e = ({ html: a, css: i, width: o, height: E, utmParams: u, syncModulesIds: m }) => t({
-          html: a,
-          css: i,
+        const e = ({ html: i, css: a, width: o, height: E, utmParams: u, syncModulesIds: m }) => t({
+          html: i,
+          css: a,
           width: o,
           height: E,
           utmParams: u,
           syncModulesIds: m
         });
-        window.StripoEditorApi.actionsApi.getTemplateData(e);
+        s().actionsApi.getTemplateData(e);
       }
     ),
     activateCustomViewStyles: (t = !0) => {
-      window.StripoEditorApi.actionsApi.activateCustomViewStyles(t);
+      s().actionsApi.activateCustomViewStyles(t);
     },
     getPreviewData: async (t) => {
       try {
         const {
           html: e,
-          displayConditions: a,
-          ampHtml: i = "",
+          displayConditions: i,
+          ampHtml: a = "",
           ampErrors: o = []
         } = await l({ minimize: !1, resetDataSavedFlag: !1, ...t });
         return {
           html: e,
-          ampHtml: i,
+          ampHtml: a,
           ampErrors: o,
-          displayConditions: a
+          displayConditions: i
         };
       } catch (e) {
         return n(e, "Error loading preview"), {
@@ -94,30 +95,30 @@ const D = 1e4, T = 3e4, p = (n, l, w) => new Promise((A, s) => {
       }
     },
     updateTimerInClonedTemplate: () => new Promise((t) => {
-      var e, a;
-      if (typeof ((a = (e = window.StripoEditorApi) == null ? void 0 : e.actionsApi) == null ? void 0 : a.updateTimerInClonedTemplate) != "function") {
+      var e, i;
+      if (typeof ((i = (e = window.StripoEditorApi) == null ? void 0 : e.actionsApi) == null ? void 0 : i.updateTimerInClonedTemplate) != "function") {
         t(null);
         return;
       }
       try {
-        window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((i, o) => {
-          i ? (n(i, "Failed to update timer in cloned template"), t(null)) : t(o || null);
+        window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((a, o) => {
+          a ? (n(a, "Failed to update timer in cloned template"), t(null)) : t(o || null);
         });
-      } catch (i) {
-        n(i, "Failed to call updateTimerInClonedTemplate"), t(null);
+      } catch (a) {
+        n(a, "Failed to call updateTimerInClonedTemplate"), t(null);
       }
     }),
     updateHtmlAndCss: (t, e) => {
-      const { actionsApi: a } = window.StripoEditorApi;
-      return p("updateHtmlAndCss", D, (i) => {
-        a.updateHtmlAndCss(t, e, () => i());
+      const { actionsApi: i } = s();
+      return r("updateHtmlAndCss", h, (a) => {
+        i.updateHtmlAndCss(t, e, () => a());
       });
     },
-    editorSave: () => p(
+    editorSave: () => r(
       "save",
       T,
       (t) => {
-        window.StripoEditorApi.actionsApi.save((e) => {
+        s().actionsApi.save((e) => {
           if (e) {
             n(e, "Failed to save template"), t(!1);
             return;
@@ -129,5 +130,5 @@ const D = 1e4, T = 3e4, p = (n, l, w) => new Promise((A, s) => {
   };
 };
 export {
-  I as useActionsApi
+  P as useActionsApi
 };

package/dist/composables/useCodeEditorApi.js

@@ -1,11 +1,25 @@
-const i = () => ({
-  openCodeEditor: () => {
-    window.StripoEditorApi.codeEditorApi.openCodeEditor();
-  },
-  closeCodeEditor: () => {
-    window.StripoEditorApi.codeEditorApi.closeCodeEditor();
-  }
-});
+import { ToasterTypeOptions as d } from "../enums/toaster.js";
+import { findEditorApi as s, EDITOR_NOT_READY_MESSAGE as p } from "../utils/stripoEditorApi.js";
+import { useToaster as E } from "./useToaster.js";
+const T = () => {
+  const { showToaster: i } = E(), t = (o) => {
+    var r;
+    const e = (r = s()) == null ? void 0 : r.codeEditorApi;
+    if (!e) {
+      i({ type: d.Error, message: p });
+      return;
+    }
+    o(e);
+  };
+  return {
+    openCodeEditor: () => {
+      t((o) => o.openCodeEditor());
+    },
+    closeCodeEditor: () => {
+      t((o) => o.closeCodeEditor());
+    }
+  };
+};
 export {
-  i as useCodeEditorApi
+  T as useCodeEditorApi
 };

package/dist/composables/useCortexBlueprintBridge.js

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

package/dist/composables/useCustomInterfaceAppearance.js

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