@mrrocket/sdk 0.17.0 → 0.21.0

package/dist/flows-ui.js

@@ -1,5 +1,8 @@
 // src/flows-ui.ts
-import { discounted, mediaOf, money, offerButton, videoEmbed } from "./flows.js";
+import { playFinish } from "./finish-web.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 = `
 .ckf-root{--ckf-accent:#3f76ff;--ckf-accent-ink:#fff;--ckf-bg:#fff;--ckf-fg:#1c1d20;--ckf-muted:#5d6068;--ckf-soft:#f4f5f7;--ckf-line:#e4e5e8;--ckf-danger:#d92d20;--ckf-radius:14px;--ckf-font:inherit;--ckf-shadow:0 16px 40px -12px rgba(16,18,24,.28),0 0 0 1px rgba(16,18,24,.07)}
@@ -28,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}
@@ -53,6 +61,12 @@ var FLOWS_CSS = `
 [data-side=bottom]>.ckf-arrow{top:0;left:var(--ckf-ap)}[data-side=top]>.ckf-arrow{top:100%;left:var(--ckf-ap)}
 [data-side=right]>.ckf-arrow{left:0;top:var(--ckf-ap)}[data-side=left]>.ckf-arrow{left:100%;top:var(--ckf-ap)}
 .ckf-check .ckf-go{margin-left:auto;align-self:center;color:var(--ckf-accent);font-weight:700}
+.ckf-ic{width:20px;height:20px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ckf-accent);font-size:16px;line-height:1}
+.ckf-ic svg{width:20px;height:20px}.ckf-ic img{width:20px;height:20px;border-radius:5px;object-fit:cover}
+.ckf-hic{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--ckf-accent) 12%,var(--ckf-bg));display:inline-flex;align-items:center;justify-content:center;color:var(--ckf-accent);font-size:22px;line-height:1}
+.ckf-hic svg{width:22px;height:22px}.ckf-hic img{width:40px;height:40px;border-radius:12px;object-fit:cover}
+.ckf-input{width:100%;height:40px;border:1px solid var(--ckf-line);border-radius:10px;background:var(--ckf-bg);padding:0 12px}
+.ckf-input::placeholder{color:var(--ckf-muted)}
 .ckf-ring{position:fixed;z-index:2147483000;pointer-events:none;border-radius:10px;box-shadow:0 0 0 2px var(--ckf-accent),0 0 0 6px color-mix(in srgb,var(--ckf-accent) 25%,transparent);transition:all .15s ease-out}
 .ckf-check{display:flex;align-items:flex-start;gap:10px;width:100%;padding:8px 6px;border:0;border-radius:8px;background:none;text-align:left}
 .ckf-check:where(button){cursor:pointer}
@@ -67,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)}
@@ -106,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");
@@ -122,11 +137,38 @@ 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;
+  const box = h("span", { className, "aria-hidden": "true" });
+  if (i.kind === "emoji") box.textContent = i.value;
+  else if (i.kind === "image") box.append(h("img", { src: i.url, alt: "" }));
+  else {
+    const ns = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(ns, "svg");
+    for (const [k, v] of Object.entries({ viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))
+      svg.setAttribute(k, v);
+    for (const d of FLOW_ICONS[i.name].paths) {
+      const p = document.createElementNS(ns, "path");
+      p.setAttribute("d", d);
+      svg.append(p);
+    }
+    box.append(svg);
+  }
+  return box;
+};
 var mountFlows = (ctl, theme = {}) => {
   if (typeof document === "undefined") return () => {
   };
   const root = rootFor(theme);
+  let played = "";
   let lastKey = "";
+  let lastSurface = "";
   let returnFocus = null;
   let comment = "";
   let placed = null;
@@ -136,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 },
@@ -159,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) {
@@ -182,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",
@@ -200,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) {
@@ -223,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
@@ -277,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 })
         )
       );
     }
@@ -288,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
       )
@@ -302,24 +345,91 @@ 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) => {
+    const s = v.step;
+    const q = s.question;
+    const titleId = "ckf-title";
+    const ok = answerOk(q, v.answer);
+    let field = false;
+    const textField = (hint, value, write) => {
+      const input = h("input", {
+        type: "text",
+        className: "ckf-input",
+        placeholder: hint,
+        "aria-labelledby": titleId,
+        maxlength: "500",
+        "data-ckf-id": "answer",
+        onInput: (e) => write(e.target.value),
+        onKeydown: (e) => e.key === "Enter" && ctl.onboarding.next()
+      });
+      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(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,
+        field,
+        h(
+          "div",
+          { className: "ckf-row" },
+          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" })
+        )
+      )
+    );
+  };
   const stepCard = (v) => {
     const s = v.step;
+    if (s.kind === "question") return questionCard(v);
     const card = h(
       "div",
       { className: "ckf-card", role: "dialog", "aria-modal": s.kind === "modal" ? "true" : void 0, "aria-labelledby": "ckf-title" },
       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;
@@ -333,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 {
@@ -383,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) },
@@ -394,20 +504,21 @@ var mountFlows = (ctl, theme = {}) => {
         h(
           "div",
           { className: "ckf-opts" },
-          ...v.items.map(({ step, done: d, tour }) => {
+          ...v.items.map(({ step, done: d, opens }) => {
             const inner = [
               h("span", { className: "ckf-tick", "aria-hidden": "true" }, d ? "\u2713" : ""),
+              iconEl(step.icon, "ckf-ic"),
               h("span", {}, h("b", {}, step.title), step.body ? h("span", { className: "ckf-small" }, step.body) : false)
             ];
-            if (!d && tour)
+            if (!d && opens)
               return h(
                 "button",
                 {
                   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.startTour(step.id)
+                  onClick: () => ctl.onboarding.open(step.id)
                 },
                 ...inner,
                 h("span", { className: "ckf-go", "aria-hidden": "true" }, "\u203A")
@@ -417,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)
               },
@@ -437,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",
@@ -445,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
@@ -454,6 +565,14 @@ 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?.();
+    if (fin && fin.key !== played) {
+      played = fin.key;
+      playFinish(fin.kind, { accent });
+    }
     const key = v ? screenKey(v) : "";
     const focused = document.activeElement?.closest?.(".ckf-root") ? document.activeElement?.getAttribute("data-ckf-id") : null;
     if (key && !lastKey && document.activeElement instanceof HTMLElement && !document.activeElement.closest(".ckf-root"))
@@ -461,13 +580,16 @@ 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)] : []
     );
     follow();
     if (key !== lastKey) {
       const modal = root.querySelector("[aria-modal=true]");
-      const first = modal?.querySelector("[role=radio], [data-ckf-id=go], textarea") ?? null;
+      const first = modal?.querySelector("[role=radio], input, [data-ckf-id=go], textarea") ?? null;
       first?.focus();
       if (!key && returnFocus) {
         returnFocus.focus();
@@ -481,7 +603,7 @@ var mountFlows = (ctl, theme = {}) => {
     const v = ctl.view();
     if (v?.type === "cancel") ctl.cancel.close();
     else if (v?.type === "message") ctl.message.dismiss();
-    else if (v?.type === "step" && v.step.kind === "modal") ctl.onboarding.dismiss();
+    else if (v?.type === "step" && (v.step.kind === "modal" || v.step.kind === "question")) ctl.onboarding.dismiss();
   };
   function follow() {
     if (placed) place(placed.float, placed.ring, placed.target, placed.side);
@@ -490,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 });
@@ -507,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) {
@@ -520,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",
@@ -545,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,
@@ -555,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
           )
         )
       )
@@ -573,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();
   };