@mrrocket/sdk 0.18.0 → 0.21.0

package/dist/flows-ui.js

@@ -1,6 +1,7 @@
 // src/flows-ui.ts
 import { playFinish } from "./finish-web.js";
-import { answerOk, discounted, mediaOf, money, offerButton, videoEmbed } from "./flows.js";
+import { OTHER_PREFIX, answerOk, forMonths, monthsWord, scaleOf, discounted, mediaOf, money, offerButton, videoEmbed } from "./flows.js";
+import { onWords, t, tf, wordsLang } from "./i18n.js";
 import { FLOW_ICONS, iconOf } from "./icons.js";
 var STYLE_ID = "ckf-styles";
 var FLOWS_CSS = `
@@ -30,6 +31,11 @@ var FLOWS_CSS = `
 .ckf-radio{width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid var(--ckf-line);display:inline-flex;align-items:center;justify-content:center}
 .ckf-opt[aria-checked=true] .ckf-radio{border-color:var(--ckf-accent)}
 .ckf-opt[aria-checked=true] .ckf-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ckf-accent)}
+.ckf-scale{display:flex;gap:4px}
+.ckf-num{flex:1;min-width:0;height:38px;padding:0;border:1px solid var(--ckf-line);border-radius:8px;background:var(--ckf-bg);cursor:pointer;font-weight:500}
+.ckf-num:hover{background:var(--ckf-soft)}
+.ckf-num[aria-checked=true]{border-color:var(--ckf-accent);background:var(--ckf-accent);color:var(--ckf-accent-ink)}
+.ckf-ends{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
 .ckf-box{border-radius:10px;background:var(--ckf-soft);padding:12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
 .ckf-big{font-size:22px;font-weight:650;font-variant-numeric:tabular-nums}
 .ckf-strike{color:var(--ckf-muted);text-decoration:line-through;font-variant-numeric:tabular-nums}
@@ -75,7 +81,7 @@ var FLOWS_CSS = `
 .ckf-banner>span{flex:1;min-width:0;display:flex;flex-direction:column}
 .ckf-banner .ckf-btn{height:32px}
 .ckf-pw{max-width:420px;gap:14px}
-.ckf-root[data-still] :is(.ckf-scrim,.ckf-card){animation:none}
+.ckf-root[data-still] :is(.ckf-scrim,.ckf-card,.ckf-banner){animation:none}
 .ckf-li{display:flex;gap:10px;align-items:flex-start;margin:0}
 .ckf-li::before{content:"\u2713";flex:none;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--ckf-accent) 14%,var(--ckf-bg));color:var(--ckf-accent);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
 .ckf-quote{margin:0;padding:12px 14px;border-radius:12px;background:var(--ckf-soft)}
@@ -114,10 +120,11 @@ var button = (label, kind, onClick, opts = {}) => h(
 var closeButton = (label, onClick) => h("button", { type: "button", className: "ckf-x", "aria-label": label, "data-ckf-id": "x", onClick: () => onClick() }, "\xD7");
 var dots = (step, steps) => steps > 1 ? h(
   "span",
-  { className: "ckf-dots", role: "img", "aria-label": `Step ${step} of ${steps}` },
+  { className: "ckf-dots", role: "img", "aria-label": tf("Step {n} of {total}", { n: step, total: steps }) },
   ...Array.from({ length: steps }, (_, i) => h("span", { className: "ckf-dot", "data-on": i < step }))
 ) : h("span");
 var screenKey = (v) => v.type === "cancel" ? `c:${v.screen}:${v.round ?? 1}` : v.type === "step" ? `s:${v.step.id}` : v.type === "checklist" ? `l:${v.flow.id}` : `m:${v.message.id}`;
+var surfaceKey = (v) => v.type === "cancel" ? "c" : v.type === "step" && (v.step.kind === "question" || v.step.kind === "modal") ? `d:${v.flow.id}` : screenKey(v);
 var rootFor = (theme) => {
   if (!document.getElementById(STYLE_ID)) {
     const style = document.createElement("style");
@@ -130,6 +137,11 @@ var rootFor = (theme) => {
   document.body.appendChild(root);
   return root;
 };
+var setRootLang = (root) => {
+  const lang = wordsLang();
+  if (lang) root.setAttribute("lang", lang);
+  else root.removeAttribute("lang");
+};
 var iconEl = (icon, className) => {
   const i = iconOf(icon);
   if (!i) return false;
@@ -156,6 +168,7 @@ var mountFlows = (ctl, theme = {}) => {
   const root = rootFor(theme);
   let played = "";
   let lastKey = "";
+  let lastSurface = "";
   let returnFocus = null;
   let comment = "";
   let placed = null;
@@ -165,7 +178,7 @@ var mountFlows = (ctl, theme = {}) => {
     const body = [];
     if (v.screen === "survey") {
       body.push(
-        h("h2", { className: "ckf-h", id: titleId }, v.flow.question || "Why are you leaving?"),
+        h("h2", { className: "ckf-h", id: titleId }, v.flow.question || t("Why are you leaving?")),
         h(
           "div",
           { className: "ckf-opts", role: "radiogroup", "aria-labelledby": titleId },
@@ -188,8 +201,8 @@ var mountFlows = (ctl, theme = {}) => {
         h(
           "div",
           { className: "ckf-btns" },
-          button("Continue", "primary", ctl.cancel.next, { disabled: !v.reason, id: "go" }),
-          button("Never mind, keep my plan", "quiet", ctl.cancel.close)
+          button(t("Continue"), "primary", ctl.cancel.next, { disabled: !v.reason, id: "go" }),
+          button(t("Never mind, keep my plan"), "quiet", ctl.cancel.close)
         )
       );
     } else if (v.screen === "followup" && v.followUp) {
@@ -211,14 +224,15 @@ var mountFlows = (ctl, theme = {}) => {
                 onClick: () => ctl.cancel.answer(a)
               },
               h("span", { className: "ckf-radio" }),
-              a
+              // The label in the visitor's language; what is recorded stays `a`.
+              f.answerLabels?.[i] || a
             )
           )
         );
       else {
         const text = h("textarea", {
           className: "ckf-text",
-          placeholder: "Your answer (optional)",
+          placeholder: t("Your answer (optional)"),
           "aria-labelledby": titleId,
           maxlength: "500",
           "data-ckf-id": "answer",
@@ -229,14 +243,14 @@ var mountFlows = (ctl, theme = {}) => {
       }
       const label = v.flow.reasons.find((r) => r.id === v.reason)?.label;
       body.push(
-        label ? h("p", { className: "ckf-small" }, `You said: ${label}`) : false,
+        label ? h("p", { className: "ckf-small" }, tf("You said: {label}", { label })) : false,
         h("h2", { className: "ckf-h", id: titleId }, f.question),
         field,
         h(
           "div",
           { className: "ckf-btns" },
-          button("Continue", "primary", ctl.cancel.next, { id: "go" }),
-          button("Never mind, keep my plan", "quiet", ctl.cancel.close)
+          button(t("Continue"), "primary", ctl.cancel.next, { id: "go" }),
+          button(t("Never mind, keep my plan"), "quiet", ctl.cancel.close)
         )
       );
     } else if (v.screen === "offer" && v.offer) {
@@ -252,48 +266,48 @@ var mountFlows = (ctl, theme = {}) => {
           h(
             "span",
             { className: "ckf-small" },
-            `/${v.price.interval ?? "month"}${o.months ? ` for ${o.months} ${o.months === 1 ? "month" : "months"}` : ""}`
+            `/${v.price.interval === "year" ? t("year") : t("month")}${o.months ? ` ${forMonths(o.months)}` : ""}`
           )
         ) : h(
           "div",
           { className: "ckf-box" },
-          h("span", { className: "ckf-big" }, `${o.percent}% off`),
-          o.months ? h("span", { className: "ckf-small" }, `for ${o.months} ${o.months === 1 ? "month" : "months"}`) : false
+          h("span", { className: "ckf-big" }, tf("{percent}% off", { percent: o.percent })),
+          o.months ? h("span", { className: "ckf-small" }, forMonths(o.months)) : false
         );
       if (o.kind === "pause" && o.months)
         detail = h(
           "div",
           { className: "ckf-box" },
-          h("span", {}, `Pause for up to ${o.months} ${o.months === 1 ? "month" : "months"}. Your data stays.`)
+          h("span", {}, tf("Pause for up to {months}. Your data stays.", { months: monthsWord(o.months) }))
         );
       if (o.kind === "downgrade" && o.planName) detail = h("div", { className: "ckf-box" }, h("b", {}, o.planName));
       const text = o.kind === "contact" ? h("textarea", {
         className: "ckf-text",
-        placeholder: "What would make you stay?",
-        "aria-label": "Your message",
+        placeholder: t("What would make you stay?"),
+        "aria-label": t("Your message"),
         maxlength: "500",
         "data-ckf-id": "comment",
         onInput: (e) => comment = e.target.value
       }) : null;
       if (text) text.value = comment;
       body.push(
-        label ? h("p", { className: "ckf-small" }, `You said: ${label}`) : false,
+        label ? h("p", { className: "ckf-small" }, tf("You said: {label}", { label })) : false,
         h("h2", { className: "ckf-h", id: titleId }, o.headline),
         detail,
         text ?? false,
         h(
           "div",
           { className: "ckf-btns" },
-          button(busy ? "One moment\u2026" : offerButton(o), "primary", () => ctl.cancel.accept(comment), { disabled: busy, id: "go" }),
-          button("No thanks, continue cancelling", "quiet", ctl.cancel.decline, { disabled: busy })
+          button(busy ? t("One moment\u2026") : offerButton(o), "primary", () => ctl.cancel.accept(comment), { disabled: busy, id: "go" }),
+          button(t("No thanks, continue cancelling"), "quiet", ctl.cancel.decline, { disabled: busy })
         )
       );
     } else {
       const plain = v.steps === 1;
       const text = plain ? null : h("textarea", {
         className: "ckf-text",
-        placeholder: "Anything else we should know? (optional)",
-        "aria-label": "Anything else we should know? (optional)",
+        placeholder: t("Anything else we should know? (optional)"),
+        "aria-label": t("Anything else we should know? (optional)"),
         maxlength: "500",
         "data-ckf-id": "comment",
         onInput: (e) => comment = e.target.value
@@ -306,8 +320,8 @@ var mountFlows = (ctl, theme = {}) => {
         h(
           "div",
           { className: "ckf-btns" },
-          button(busy ? "One moment\u2026" : v.flow.confirm.button, "danger", () => ctl.cancel.confirm(comment), { disabled: busy, id: "go" }),
-          button("Keep my plan", "secondary", ctl.cancel.close, { disabled: busy })
+          button(busy ? t("One moment\u2026") : v.flow.confirm.button, "danger", () => ctl.cancel.confirm(comment), { disabled: busy, id: "go" }),
+          button(t("Keep my plan"), "secondary", ctl.cancel.close, { disabled: busy })
         )
       );
     }
@@ -317,7 +331,7 @@ var mountFlows = (ctl, theme = {}) => {
       h(
         "div",
         { className: "ckf-card", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId },
-        h("div", { className: "ckf-top" }, dots(v.step, v.steps), closeButton("Close", ctl.cancel.close)),
+        h("div", { className: "ckf-top" }, dots(v.step, v.steps), closeButton(t("Close"), ctl.cancel.close)),
         ...body,
         v.error ? h("p", { className: "ckf-err", role: "alert" }, v.error) : false
       )
@@ -331,7 +345,7 @@ var mountFlows = (ctl, theme = {}) => {
     return v.kind === "iframe" ? h(
       "div",
       { className: "ckf-video" },
-      h("iframe", { src: v.src, title: m.alt || "Video", allow: "fullscreen; picture-in-picture", allowfullscreen: true, loading: "lazy", referrerpolicy: "strict-origin-when-cross-origin" })
+      h("iframe", { src: v.src, title: m.alt || t("Video"), allow: "fullscreen; picture-in-picture", allowfullscreen: true, loading: "lazy", referrerpolicy: "strict-origin-when-cross-origin" })
     ) : h("video", { className: "ckf-media", src: v.src, controls: true, playsinline: true, preload: "metadata", "aria-label": m.alt || void 0, onLoadedmetadata: () => follow() });
   };
   const questionCard = (v) => {
@@ -340,47 +354,51 @@ var mountFlows = (ctl, theme = {}) => {
     const titleId = "ckf-title";
     const ok = answerOk(q, v.answer);
     let field = false;
-    if (q?.type === "choice")
-      field = h(
-        "div",
-        { className: "ckf-opts", role: "radiogroup", "aria-labelledby": titleId },
-        ...(q.options ?? []).map(
-          (o) => h(
-            "button",
-            {
-              type: "button",
-              role: "radio",
-              className: "ckf-opt",
-              "aria-checked": String(v.answer === o.id),
-              "data-ckf-id": `q:${o.id}`,
-              onClick: () => ctl.onboarding.answer(o.id)
-            },
-            h("span", { className: "ckf-radio" }),
-            o.label
-          )
-        )
-      );
-    else if (q) {
+    const textField = (hint, value, write) => {
       const input = h("input", {
         type: "text",
         className: "ckf-input",
-        placeholder: q.placeholder || "Your answer",
+        placeholder: hint,
         "aria-labelledby": titleId,
         maxlength: "500",
         "data-ckf-id": "answer",
-        onInput: (e) => ctl.onboarding.answer(e.target.value),
+        onInput: (e) => write(e.target.value),
         onKeydown: (e) => e.key === "Enter" && ctl.onboarding.next()
       });
-      input.value = v.answer ?? "";
-      field = input;
-    }
+      input.value = value;
+      return input;
+    };
+    const picked = (on, id, label, press) => h("button", { type: "button", role: "radio", className: "ckf-opt", "aria-checked": String(on), "data-ckf-id": `q:${id}`, onClick: press }, h("span", { className: "ckf-radio" }), label);
+    if (q?.type === "choice") {
+      const other = !!q.other && !!v.answer?.startsWith(OTHER_PREFIX);
+      field = h(
+        "div",
+        { className: "ckf-opts", role: "radiogroup", "aria-labelledby": titleId },
+        ...(q.options ?? []).map((o) => picked(v.answer === o.id, o.id, o.label, () => ctl.onboarding.answer(o.id))),
+        q.other ? picked(other, "other", q.otherLabel || t("Other"), () => other || ctl.onboarding.answer(OTHER_PREFIX)) : false,
+        other ? textField(t("Your answer"), v.answer.slice(OTHER_PREFIX.length), (t2) => ctl.onboarding.answer(OTHER_PREFIX + t2)) : false
+      );
+    } else if (q?.type === "scale")
+      field = h(
+        "div",
+        {},
+        h(
+          "div",
+          { className: "ckf-scale", role: "radiogroup", "aria-labelledby": titleId },
+          ...scaleOf(q).map(
+            (n) => h("button", { type: "button", role: "radio", className: "ckf-num", "aria-checked": String(v.answer === String(n)), "data-ckf-id": `q:${n}`, onClick: () => ctl.onboarding.answer(String(n)) }, String(n))
+          )
+        ),
+        q.lowLabel || q.highLabel ? h("div", { className: "ckf-ends ckf-small" }, h("span", {}, q.lowLabel || ""), h("span", {}, q.highLabel || "")) : false
+      );
+    else if (q) field = textField(q.placeholder || t("Your answer"), v.answer ?? "", (t2) => ctl.onboarding.answer(t2));
     return h(
       "div",
       { className: "ckf-scrim" },
       h(
         "div",
         { className: "ckf-card", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId },
-        h("div", { className: "ckf-top" }, dots(v.index + 1, v.total), closeButton("Close", ctl.onboarding.dismiss)),
+        h("div", { className: "ckf-top" }, dots(v.index + 1, v.total), closeButton(t("Close"), ctl.onboarding.dismiss)),
         v.index === 0 ? iconEl(v.flow.icon, "ckf-hic") : false,
         h("h2", { className: "ckf-h", id: titleId }, s.title),
         s.body ? h("p", { className: "ckf-p" }, s.body) : false,
@@ -388,8 +406,9 @@ var mountFlows = (ctl, theme = {}) => {
         h(
           "div",
           { className: "ckf-row" },
-          v.back ? button("Back", "quiet", ctl.onboarding.back) : false,
-          button(s.button || (v.last ? "Done" : "Continue"), "primary", ctl.onboarding.next, { disabled: !ok, id: "go" })
+          v.back ? button(t("Back"), "quiet", ctl.onboarding.back) : false,
+          q?.optional ? button(q.skipLabel || t("Skip"), "quiet", ctl.onboarding.skip) : false,
+          button(s.button || (v.last ? t("Done") : t("Continue")), "primary", ctl.onboarding.next, { disabled: !ok, id: "go" })
         )
       )
     );
@@ -403,14 +422,14 @@ var mountFlows = (ctl, theme = {}) => {
       h(
         "div",
         { className: "ckf-top" },
-        v.total > 1 ? h("p", { className: "ckf-small" }, `Step ${v.index + 1} of ${v.total}`) : h("span"),
-        closeButton("Close the tour", ctl.onboarding.dismiss)
+        v.total > 1 ? h("p", { className: "ckf-small" }, tf("Step {n} of {total}", { n: v.index + 1, total: v.total })) : h("span"),
+        closeButton(t("Close the tour"), ctl.onboarding.dismiss)
       ),
       s.kind === "modal" ? iconEl(v.flow.icon, "ckf-hic") : false,
       media(s),
       h("h2", { className: "ckf-h", id: "ckf-title" }, s.title),
       s.body ? h("p", { className: "ckf-p" }, s.body) : false,
-      h("div", { className: "ckf-row" }, button(s.button || (v.last ? "Done" : "Next"), "primary", ctl.onboarding.next, { id: "go" }))
+      h("div", { className: "ckf-row" }, button(s.button || (v.last ? t("Done") : t("Next")), "primary", ctl.onboarding.next, { id: "go" }))
     );
     if (s.kind === "modal") return h("div", { className: "ckf-scrim" }, card);
     const target = s.target ? findTarget(s.target) : null;
@@ -424,10 +443,10 @@ var mountFlows = (ctl, theme = {}) => {
     }
     return float;
   };
-  const findTarget = (t) => {
-    const named = () => document.querySelector(`[data-ck-target="${CSS.escape(t)}"]`);
-    if (!/^[#.[]|[\s>:=]/.test(t)) return named();
-    return safeQuery(t) ?? named();
+  const findTarget = (t2) => {
+    const named = () => document.querySelector(`[data-ck-target="${CSS.escape(t2)}"]`);
+    if (!/^[#.[]|[\s>:=]/.test(t2)) return named();
+    return safeQuery(t2) ?? named();
   };
   const safeQuery = (sel) => {
     try {
@@ -474,9 +493,9 @@ var mountFlows = (ctl, theme = {}) => {
           "div",
           { className: "ckf-top" },
           h("h2", { className: "ckf-h", id: "ckf-title" }, v.flow.name),
-          closeButton("Hide the checklist", ctl.onboarding.dismiss)
+          closeButton(t("Hide the checklist"), ctl.onboarding.dismiss)
         ),
-        h("p", { className: "ckf-small" }, `${done} of ${v.items.length} done`),
+        h("p", { className: "ckf-small" }, tf("{done} of {total} done", { done, total: v.items.length })),
         h(
           "div",
           { className: "ckf-bar", role: "progressbar", "aria-valuemin": "0", "aria-valuemax": String(v.items.length), "aria-valuenow": String(done) },
@@ -497,7 +516,7 @@ var mountFlows = (ctl, theme = {}) => {
                 {
                   type: "button",
                   className: "ckf-check",
-                  "aria-label": `Start \u201C${step.title}\u201D`,
+                  "aria-label": tf("Start \u201C{title}\u201D", { title: step.title }),
                   "data-ckf-id": `t:${step.id}`,
                   onClick: () => ctl.onboarding.open(step.id)
                 },
@@ -509,7 +528,7 @@ var mountFlows = (ctl, theme = {}) => {
               {
                 type: "button",
                 className: "ckf-check",
-                "aria-label": `Mark \u201C${step.title}\u201D done`,
+                "aria-label": tf("Mark \u201C{title}\u201D done", { title: step.title }),
                 "data-ckf-id": `i:${step.id}`,
                 onClick: () => ctl.onboarding.check(step.id)
               },
@@ -529,7 +548,7 @@ var mountFlows = (ctl, theme = {}) => {
         { className: "ckf-banner", role: "status" },
         h("span", {}, h("b", {}, m.title), m.body ? h("span", { className: "ckf-small" }, m.body) : false),
         action,
-        closeButton("Dismiss", ctl.message.dismiss)
+        closeButton(t("Dismiss"), ctl.message.dismiss)
       );
     return h(
       "div",
@@ -537,7 +556,7 @@ var mountFlows = (ctl, theme = {}) => {
       h(
         "div",
         { className: "ckf-card", role: "dialog", "aria-modal": "true", "aria-labelledby": "ckf-title" },
-        h("div", { className: "ckf-top" }, h("span"), closeButton("Dismiss", ctl.message.dismiss)),
+        h("div", { className: "ckf-top" }, h("span"), closeButton(t("Dismiss"), ctl.message.dismiss)),
         h("h2", { className: "ckf-h", id: "ckf-title" }, m.title),
         m.body ? h("p", { className: "ckf-p" }, m.body) : false,
         action ? h("div", { className: "ckf-row" }, action) : false
@@ -546,6 +565,7 @@ var mountFlows = (ctl, theme = {}) => {
   };
   const draw = () => {
     const v = ctl.view();
+    setRootLang(root);
     const accent = theme.accent ?? ctl.accent?.();
     if (accent) root.style.setProperty("--ckf-accent", accent);
     const fin = ctl.finale?.();
@@ -560,6 +580,9 @@ var mountFlows = (ctl, theme = {}) => {
     if (key !== lastKey && !key.startsWith("c:")) comment = "";
     if (!key) comment = "";
     placed = null;
+    const surface = v ? surfaceKey(v) : "";
+    root.toggleAttribute("data-still", !!surface && surface === lastSurface);
+    lastSurface = surface;
     root.replaceChildren(
       ...v ? [v.type === "cancel" ? cancelCard(v) : v.type === "step" ? stepCard(v) : v.type === "checklist" ? checklist(v) : message(v)] : []
     );
@@ -589,9 +612,11 @@ var mountFlows = (ctl, theme = {}) => {
   window.addEventListener("resize", follow);
   window.addEventListener("scroll", follow, { passive: true, capture: true });
   const off = ctl.subscribe(draw);
+  const offWords = onWords(draw);
   draw();
   return () => {
     off();
+    offWords();
     document.removeEventListener("keydown", onKey);
     window.removeEventListener("resize", follow);
     window.removeEventListener("scroll", follow, { capture: true });
@@ -606,6 +631,7 @@ var mountPaywall = (host, theme = {}) => {
   let returnFocus = null;
   const draw = () => {
     const v = host.view();
+    setRootLang(root);
     const key = v ? `${v.paywall.id}:${v.index}` : "";
     if (key && !lastKey && document.activeElement instanceof HTMLElement) returnFocus = document.activeElement;
     if (!v) {
@@ -619,7 +645,7 @@ var mountPaywall = (host, theme = {}) => {
     const p = v.page;
     const plans = p.kind === "plans" ? h(
       "div",
-      { className: "ckf-opts", role: "radiogroup", "aria-label": "Plans" },
+      { className: "ckf-opts", role: "radiogroup", "aria-label": t("Plans") },
       ...v.plans.map(
         (plan) => h(
           "button",
@@ -644,7 +670,7 @@ var mountPaywall = (host, theme = {}) => {
         h(
           "div",
           { className: "ckf-card ckf-pw", role: "dialog", "aria-modal": "true", "aria-labelledby": "ckf-title" },
-          h("div", { className: "ckf-top" }, dots(v.index + 1, v.total), closeButton("Close", host.close)),
+          h("div", { className: "ckf-top" }, dots(v.index + 1, v.total), closeButton(t("Close"), host.close)),
           h("h2", { className: "ckf-h", id: "ckf-title" }, p.title),
           p.body ? h("p", { className: "ckf-p" }, p.body) : false,
           p.kind === "benefits" && p.items?.length ? h("div", { className: "ckf-opts" }, ...p.items.map((i) => h("p", { className: "ckf-li" }, i))) : false,
@@ -654,11 +680,11 @@ var mountPaywall = (host, theme = {}) => {
           h(
             "div",
             { className: "ckf-btns" },
-            button(v.busy ? "One moment\u2026" : p.button || "Continue", "primary", host.next, {
+            button(v.busy ? t("One moment\u2026") : p.button || t("Continue"), "primary", host.next, {
               disabled: v.busy || p.kind === "plans" && !v.plan,
               id: "go"
             }),
-            v.index ? button("Back", "quiet", host.back, { disabled: v.busy }) : false
+            v.index ? button(t("Back"), "quiet", host.back, { disabled: v.busy }) : false
           )
         )
       )
@@ -672,9 +698,11 @@ var mountPaywall = (host, theme = {}) => {
   };
   document.addEventListener("keydown", onKey);
   const off = host.subscribe(draw);
+  const offWords = onWords(draw);
   draw();
   return () => {
     off();
+    offWords();
     document.removeEventListener("keydown", onKey);
     root.remove();
   };