@mrrocket/sdk 0.16.0 → 0.18.0

package/dist/finish-web.js

@@ -0,0 +1,139 @@
+// src/finish-web.ts
+var prefersReducedMotion = () => {
+  try {
+    return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+};
+var COLORS = ["#f59e0b", "#10b981", "#ef4444", "#8b5cf6", "#06b6d4", "#ec4899"];
+var star = (c, r) => {
+  c.beginPath();
+  for (let i = 0; i < 10; i++) {
+    const a = Math.PI / 5 * i - Math.PI / 2;
+    const d = i % 2 ? r * 0.45 : r;
+    c[i ? "lineTo" : "moveTo"](Math.cos(a) * d, Math.sin(a) * d);
+  }
+  c.closePath();
+  c.fill();
+};
+var bitsFor = (kind, w, h, colors) => {
+  const rnd = (a, b) => a + Math.random() * (b - a);
+  const pick = () => colors[Math.floor(Math.random() * colors.length)];
+  const out = [];
+  if (kind === "confetti")
+    for (let i = 0; i < 110; i++) {
+      const left = i % 2 === 0;
+      out.push({
+        x: left ? w * 0.15 : w * 0.85,
+        y: h * 0.95,
+        vx: (left ? 1 : -1) * rnd(0.12, 0.42) * (w / 900 + 0.4),
+        vy: -rnd(0.75, 1.25) * (h / 900 + 0.35),
+        r: rnd(4, 7),
+        spin: rnd(-0.02, 0.02),
+        angle: rnd(0, Math.PI),
+        color: pick(),
+        born: rnd(0, 180),
+        life: rnd(1500, 2100),
+        shape: "rect"
+      });
+    }
+  else if (kind === "fireworks")
+    for (let b = 0; b < 4; b++) {
+      const cx = rnd(w * 0.2, w * 0.8);
+      const cy = rnd(h * 0.18, h * 0.5);
+      const color = pick();
+      for (let i = 0; i < 46; i++) {
+        const a = Math.PI * 2 * i / 46 + rnd(-0.05, 0.05);
+        const v = rnd(0.12, 0.3) * (Math.min(w, h) / 600 + 0.5);
+        out.push({ x: cx, y: cy, vx: Math.cos(a) * v, vy: Math.sin(a) * v, r: rnd(1.6, 2.6), spin: 0, angle: 0, color, born: b * 320, life: rnd(900, 1300), shape: "dot" });
+      }
+    }
+  else
+    for (let i = 0; i < 34; i++)
+      out.push({
+        x: rnd(w * 0.08, w * 0.92),
+        y: rnd(h * 0.2, h * 0.85),
+        vx: 0,
+        vy: -rnd(0.02, 0.06),
+        r: rnd(6, 13),
+        spin: rnd(-4e-3, 4e-3),
+        angle: rnd(0, Math.PI),
+        color: pick(),
+        born: rnd(0, 700),
+        life: rnd(900, 1300),
+        shape: "star"
+      });
+  return out;
+};
+var playFinish = (kind, opts = {}) => {
+  if (!kind || kind === "none" || typeof document === "undefined" || !opts.force && prefersReducedMotion()) return () => {
+  };
+  const canvas = document.createElement("canvas");
+  canvas.setAttribute("aria-hidden", "true");
+  const host = opts.host;
+  canvas.style.cssText = host ? "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5" : "position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483003";
+  (host ?? document.body).appendChild(canvas);
+  const w = host ? host.clientWidth : window.innerWidth;
+  const h = host ? host.clientHeight : window.innerHeight;
+  const dpr = Math.min(2, window.devicePixelRatio || 1);
+  canvas.width = Math.max(1, Math.round(w * dpr));
+  canvas.height = Math.max(1, Math.round(h * dpr));
+  const c = canvas.getContext("2d");
+  if (!c) {
+    canvas.remove();
+    return () => {
+    };
+  }
+  const colors = opts.accent ? [opts.accent, opts.accent, ...COLORS] : COLORS;
+  const bits = bitsFor(kind, w, h, colors);
+  const end = Math.max(...bits.map((b) => b.born + b.life));
+  const gravity = kind === "confetti" ? 16e-4 : kind === "fireworks" ? 35e-5 : 0;
+  let frame = 0;
+  let start = 0;
+  let stopped = false;
+  const stop = () => {
+    if (stopped) return;
+    stopped = true;
+    cancelAnimationFrame(frame);
+    canvas.remove();
+  };
+  const draw = (t) => {
+    if (stopped) return;
+    if (!start) start = t;
+    const el = t - start;
+    c.setTransform(dpr, 0, 0, dpr, 0, 0);
+    c.clearRect(0, 0, w, h);
+    for (const b of bits) {
+      const age = el - b.born;
+      if (age < 0 || age > b.life) continue;
+      const x = b.x + b.vx * age;
+      const y = b.y + b.vy * age + 0.5 * gravity * age * age;
+      const fade = Math.min(1, (b.life - age) / 350);
+      c.save();
+      c.globalAlpha = Math.max(0, fade);
+      c.translate(x, y);
+      c.rotate(b.angle + b.spin * age);
+      c.fillStyle = b.color;
+      if (b.shape === "rect") c.fillRect(-b.r, -b.r / 2.2, b.r * 2, b.r / 1.1);
+      else if (b.shape === "dot") {
+        c.beginPath();
+        c.arc(0, 0, b.r, 0, Math.PI * 2);
+        c.fill();
+      } else {
+        const grow = Math.min(1, age / 220);
+        star(c, b.r * (grow < 1 ? grow : 1 - Math.max(0, (age - b.life * 0.6) / (b.life * 0.4)) * 0.6));
+      }
+      c.restore();
+    }
+    if (el < end) frame = requestAnimationFrame(draw);
+    else stop();
+  };
+  frame = requestAnimationFrame(draw);
+  return stop;
+};
+export {
+  playFinish,
+  prefersReducedMotion
+};
+//# sourceMappingURL=finish-web.js.map

package/dist/finish-web.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/finish-web.ts"],"sourcesContent":["/**\n * 0.18.0: the finish animation on the web (`FinishAnimation`): confetti, fireworks or stars on one canvas for about two\n * seconds, then gone. No library, no timers left behind, nothing to click through (the canvas lets every click pass).\n * Nothing plays when the visitor asks for less motion (`prefers-reduced-motion`). The flows' dialogs (flows-ui.ts) play\n * it when someone finishes a checklist, a tour or the questions; MRRocket's editor plays the same code in its preview.\n */\nimport type { FinishAnimation } from \"./flows\";\n\n/** Whether the visitor's system asks for less motion. */\nexport const prefersReducedMotion = () => {\n    try {\n        return typeof matchMedia === \"function\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    } catch {\n        return false;\n    }\n};\n\nconst COLORS = [\"#f59e0b\", \"#10b981\", \"#ef4444\", \"#8b5cf6\", \"#06b6d4\", \"#ec4899\"];\n\ninterface Bit {\n    x: number;\n    y: number;\n    vx: number;\n    vy: number;\n    r: number;\n    spin: number;\n    angle: number;\n    color: string;\n    /** When it appears and how long it lives, in ms from the start. */\n    born: number;\n    life: number;\n    shape: \"rect\" | \"dot\" | \"star\";\n}\n\nconst star = (c: CanvasRenderingContext2D, r: number) => {\n    c.beginPath();\n    for (let i = 0; i < 10; i++) {\n        const a = (Math.PI / 5) * i - Math.PI / 2;\n        const d = i % 2 ? r * 0.45 : r;\n        c[i ? \"lineTo\" : \"moveTo\"](Math.cos(a) * d, Math.sin(a) * d);\n    }\n    c.closePath();\n    c.fill();\n};\n\n/** The particles of one animation on a w×h area. */\nconst bitsFor = (kind: Exclude<FinishAnimation, \"none\">, w: number, h: number, colors: string[]): Bit[] => {\n    const rnd = (a: number, b: number) => a + Math.random() * (b - a);\n    const pick = () => colors[Math.floor(Math.random() * colors.length)];\n    const out: Bit[] = [];\n    if (kind === \"confetti\")\n        for (let i = 0; i < 110; i++) {\n            const left = i % 2 === 0;\n            out.push({\n                x: left ? w * 0.15 : w * 0.85,\n                y: h * 0.95,\n                vx: (left ? 1 : -1) * rnd(0.12, 0.42) * (w / 900 + 0.4),\n                vy: -rnd(0.75, 1.25) * (h / 900 + 0.35),\n                r: rnd(4, 7),\n                spin: rnd(-0.02, 0.02),\n                angle: rnd(0, Math.PI),\n                color: pick(),\n                born: rnd(0, 180),\n                life: rnd(1500, 2100),\n                shape: \"rect\",\n            });\n        }\n    else if (kind === \"fireworks\")\n        for (let b = 0; b < 4; b++) {\n            const cx = rnd(w * 0.2, w * 0.8);\n            const cy = rnd(h * 0.18, h * 0.5);\n            const color = pick();\n            for (let i = 0; i < 46; i++) {\n                const a = (Math.PI * 2 * i) / 46 + rnd(-0.05, 0.05);\n                const v = rnd(0.12, 0.3) * (Math.min(w, h) / 600 + 0.5);\n                out.push({ x: cx, y: cy, vx: Math.cos(a) * v, vy: Math.sin(a) * v, r: rnd(1.6, 2.6), spin: 0, angle: 0, color, born: b * 320, life: rnd(900, 1300), shape: \"dot\" });\n            }\n        }\n    else\n        for (let i = 0; i < 34; i++)\n            out.push({\n                x: rnd(w * 0.08, w * 0.92),\n                y: rnd(h * 0.2, h * 0.85),\n                vx: 0,\n                vy: -rnd(0.02, 0.06),\n                r: rnd(6, 13),\n                spin: rnd(-0.004, 0.004),\n                angle: rnd(0, Math.PI),\n                color: pick(),\n                born: rnd(0, 700),\n                life: rnd(900, 1300),\n                shape: \"star\",\n            });\n    return out;\n};\n\n/**\n * Plays `kind` over `host` (filling it; the host should be positioned) or over the whole window; answers a function\n * that stops it early. `accent` joins the colors.\n */\nexport const playFinish = (kind: FinishAnimation | undefined, opts: { accent?: string; host?: HTMLElement; force?: boolean } = {}): (() => void) => {\n    if (!kind || kind === \"none\" || typeof document === \"undefined\" || (!opts.force && prefersReducedMotion())) return () => {};\n    const canvas = document.createElement(\"canvas\");\n    canvas.setAttribute(\"aria-hidden\", \"true\");\n    const host = opts.host;\n    canvas.style.cssText = host\n        ? \"position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5\"\n        : \"position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483003\";\n    (host ?? document.body).appendChild(canvas);\n    const w = host ? host.clientWidth : window.innerWidth;\n    const h = host ? host.clientHeight : window.innerHeight;\n    const dpr = Math.min(2, window.devicePixelRatio || 1);\n    canvas.width = Math.max(1, Math.round(w * dpr));\n    canvas.height = Math.max(1, Math.round(h * dpr));\n    const c = canvas.getContext(\"2d\");\n    if (!c) {\n        canvas.remove();\n        return () => {};\n    }\n    const colors = opts.accent ? [opts.accent, opts.accent, ...COLORS] : COLORS;\n    const bits = bitsFor(kind, w, h, colors);\n    const end = Math.max(...bits.map((b) => b.born + b.life));\n    const gravity = kind === \"confetti\" ? 0.0016 : kind === \"fireworks\" ? 0.00035 : 0;\n    let frame = 0;\n    let start = 0;\n    let stopped = false;\n    const stop = () => {\n        if (stopped) return;\n        stopped = true;\n        cancelAnimationFrame(frame);\n        canvas.remove();\n    };\n    const draw = (t: number) => {\n        if (stopped) return;\n        if (!start) start = t;\n        const el = t - start;\n        c.setTransform(dpr, 0, 0, dpr, 0, 0);\n        c.clearRect(0, 0, w, h);\n        for (const b of bits) {\n            const age = el - b.born;\n            if (age < 0 || age > b.life) continue;\n            const x = b.x + b.vx * age;\n            const y = b.y + b.vy * age + 0.5 * gravity * age * age;\n            const fade = Math.min(1, (b.life - age) / 350);\n            c.save();\n            c.globalAlpha = Math.max(0, fade);\n            c.translate(x, y);\n            c.rotate(b.angle + b.spin * age);\n            c.fillStyle = b.color;\n            if (b.shape === \"rect\") c.fillRect(-b.r, -b.r / 2.2, b.r * 2, b.r / 1.1);\n            else if (b.shape === \"dot\") {\n                c.beginPath();\n                c.arc(0, 0, b.r, 0, Math.PI * 2);\n                c.fill();\n            } else {\n                // A star pops in, then shrinks away.\n                const grow = Math.min(1, age / 220);\n                star(c, b.r * (grow < 1 ? grow : 1 - Math.max(0, (age - b.life * 0.6) / (b.life * 0.4)) * 0.6));\n            }\n            c.restore();\n        }\n        if (el < end) frame = requestAnimationFrame(draw);\n        else stop();\n    };\n    frame = requestAnimationFrame(draw);\n    return stop;\n};\n"],"mappings":"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","names":[]}

package/dist/flows-ui.d.ts

@@ -1,12 +1,3 @@
-/**
- * The web renderer of the cancel flow, onboarding and in-app messages (flows.ts): plain DOM, no React, so the Next.js
- * provider and the script tag share it. Both load it only when something is about to show (a dynamic import, and
- * `sdk-flows.js` for the script tag), so pages that show nothing never download it.
- *
- * Themeable three ways: `theme` ("light", "dark", "auto") and `accent` from the SDK's options, and CSS variables on
- * `.ckf-root` in the site's own stylesheet (`--ckf-accent`, `--ckf-bg`, `--ckf-fg`, `--ckf-muted`, `--ckf-line`,
- * `--ckf-radius`, `--ckf-font`). Every text is set with textContent; nothing from the server is parsed as HTML.
- */
 import { type FlowsController } from "./flows.js";
 import type { PaywallHost } from "./paywall.js";
 export interface FlowsTheme {
@@ -16,7 +7,7 @@ export interface FlowsTheme {
     /** An extra class on the root, for the site's own CSS. */
     className?: string;
 }
-export declare const FLOWS_CSS = "\n.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)}\n.ckf-root[data-theme=dark]{--ckf-bg:#17181b;--ckf-fg:#f1f2f4;--ckf-muted:#a9acb3;--ckf-soft:#232428;--ckf-line:#2e2f35;--ckf-shadow:0 16px 40px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}\n@media (prefers-color-scheme:dark){.ckf-root[data-theme=auto]{--ckf-bg:#17181b;--ckf-fg:#f1f2f4;--ckf-muted:#a9acb3;--ckf-soft:#232428;--ckf-line:#2e2f35;--ckf-shadow:0 16px 40px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}}\n.ckf-root,.ckf-root *{box-sizing:border-box}\n.ckf-root{font-family:var(--ckf-font);font-size:14px;line-height:1.45;color:var(--ckf-fg);-webkit-font-smoothing:antialiased}\n.ckf-root :where(button,textarea){font:inherit;color:inherit;margin:0}\n.ckf-root :focus-visible{outline:2px solid var(--ckf-accent);outline-offset:2px}\n.ckf-scrim{position:fixed;inset:0;z-index:2147483002;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:16px;animation:ckf-fade .15s ease-out}\n.ckf-card{position:relative;width:100%;max-width:400px;max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--ckf-bg);color:var(--ckf-fg);border-radius:var(--ckf-radius);box-shadow:var(--ckf-shadow);padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px;animation:ckf-in .18s ease-out}\n.ckf-float{position:fixed;z-index:2147483001;right:20px;bottom:20px;width:340px;max-width:calc(100vw - 24px)}\n.ckf-top{display:flex;align-items:center;gap:8px;min-height:20px}\n.ckf-dots{display:flex;gap:4px}\n.ckf-dot{width:16px;height:4px;border-radius:4px;background:var(--ckf-line)}\n.ckf-dot[data-on]{background:var(--ckf-accent)}\n.ckf-x{margin-left:auto;width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--ckf-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1}\n.ckf-x:hover{background:var(--ckf-soft);color:var(--ckf-fg)}\n.ckf-h{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em;text-wrap:balance}\n.ckf-p{margin:0;color:var(--ckf-muted);text-wrap:pretty;white-space:pre-wrap}\n.ckf-small{margin:0;font-size:12px;color:var(--ckf-muted)}\n.ckf-opts{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}\n.ckf-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--ckf-line);border-radius:10px;background:var(--ckf-bg);text-align:left;cursor:pointer;font-weight:500}\n.ckf-opt:hover{background:var(--ckf-soft)}\n.ckf-opt[aria-checked=true]{border-color:var(--ckf-accent);background:color-mix(in srgb,var(--ckf-accent) 8%,var(--ckf-bg))}\n.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}\n.ckf-opt[aria-checked=true] .ckf-radio{border-color:var(--ckf-accent)}\n.ckf-opt[aria-checked=true] .ckf-radio::after{content:\"\";width:8px;height:8px;border-radius:50%;background:var(--ckf-accent)}\n.ckf-box{border-radius:10px;background:var(--ckf-soft);padding:12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}\n.ckf-big{font-size:22px;font-weight:650;font-variant-numeric:tabular-nums}\n.ckf-strike{color:var(--ckf-muted);text-decoration:line-through;font-variant-numeric:tabular-nums}\n.ckf-text{width:100%;min-height:64px;resize:vertical;border:1px solid var(--ckf-line);border-radius:10px;background:var(--ckf-bg);padding:8px 10px}\n.ckf-text::placeholder{color:var(--ckf-muted)}\n.ckf-btns{display:flex;flex-direction:column;gap:6px}\n.ckf-btn{height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--ckf-line);background:var(--ckf-bg);font-weight:600;cursor:pointer;transition:filter .1s linear,background-color .1s linear}\n.ckf-btn:hover{background:var(--ckf-soft)}\n.ckf-btn[disabled]{opacity:.55;cursor:not-allowed}\n.ckf-primary{background:var(--ckf-accent);border-color:var(--ckf-accent);color:var(--ckf-accent-ink)}\n.ckf-primary:hover{background:var(--ckf-accent);filter:brightness(1.07)}\n.ckf-danger{background:var(--ckf-danger);border-color:var(--ckf-danger);color:#fff}\n.ckf-danger:hover{background:var(--ckf-danger);filter:brightness(1.07)}\n.ckf-quiet{border-color:transparent;background:none;color:var(--ckf-muted);height:30px;font-weight:500}\n.ckf-quiet:hover{background:none;color:var(--ckf-fg)}\n.ckf-err{margin:0;color:var(--ckf-danger);font-size:13px;font-weight:500}\n.ckf-row{display:flex;justify-content:flex-end;gap:8px;align-items:center}\n.ckf-row .ckf-small{margin-right:auto}\n.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}\n.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}\n.ckf-check:where(button){cursor:pointer}\n.ckf-check:where(button):hover{background:var(--ckf-soft)}\n.ckf-tick{width:18px;height:18px;flex:none;margin-top:1px;border-radius:50%;border:1.5px solid var(--ckf-line);display:inline-flex;align-items:center;justify-content:center;color:var(--ckf-accent-ink);font-size:11px;font-weight:700}\n.ckf-check[data-done] .ckf-tick{background:var(--ckf-accent);border-color:var(--ckf-accent)}\n.ckf-check[data-done] b{color:var(--ckf-muted);text-decoration:line-through}\n.ckf-check span{display:flex;flex-direction:column;gap:2px;min-width:0}\n.ckf-bar{height:4px;border-radius:4px;background:var(--ckf-soft);overflow:hidden}\n.ckf-bar i{display:block;height:100%;background:var(--ckf-accent)}\n.ckf-banner{position:fixed;z-index:2147483001;left:50%;top:12px;transform:translateX(-50%);width:min(640px,calc(100vw - 24px));background:var(--ckf-bg);border-radius:12px;box-shadow:var(--ckf-shadow);padding:10px 10px 10px 16px;display:flex;align-items:center;gap:12px;animation:ckf-in .18s ease-out}\n.ckf-banner>span{flex:1;min-width:0;display:flex;flex-direction:column}\n.ckf-banner .ckf-btn{height:32px}\n.ckf-pw{max-width:420px;gap:14px}\n.ckf-root[data-still] :is(.ckf-scrim,.ckf-card){animation:none}\n.ckf-li{display:flex;gap:10px;align-items:flex-start;margin:0}\n.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}\n.ckf-quote{margin:0;padding:12px 14px;border-radius:12px;background:var(--ckf-soft)}\n.ckf-quote cite{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--ckf-muted)}\n.ckf-plan{justify-content:space-between;min-height:52px}\n.ckf-plan span:nth-child(2){display:flex;flex-direction:column;margin-right:auto}\n.ckf-plan b{font-variant-numeric:tabular-nums}\n@keyframes ckf-fade{from{opacity:0}}\n@keyframes ckf-in{from{opacity:0;transform:translateY(6px)}}\n.ckf-banner{animation-name:ckf-fade}\n@media (max-width:520px){.ckf-scrim{align-items:flex-end;padding:0}.ckf-scrim .ckf-card{max-width:none;border-radius:var(--ckf-radius) var(--ckf-radius) 0 0;max-height:92dvh}.ckf-float{right:12px;bottom:12px}}\n@media (prefers-reduced-motion:reduce){.ckf-root *{animation:none!important;transition:none!important}}\n";
+export declare const FLOWS_CSS = "\n.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)}\n.ckf-root[data-theme=dark]{--ckf-bg:#17181b;--ckf-fg:#f1f2f4;--ckf-muted:#a9acb3;--ckf-soft:#232428;--ckf-line:#2e2f35;--ckf-shadow:0 16px 40px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}\n@media (prefers-color-scheme:dark){.ckf-root[data-theme=auto]{--ckf-bg:#17181b;--ckf-fg:#f1f2f4;--ckf-muted:#a9acb3;--ckf-soft:#232428;--ckf-line:#2e2f35;--ckf-shadow:0 16px 40px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}}\n.ckf-root,.ckf-root *{box-sizing:border-box}\n.ckf-root{font-family:var(--ckf-font);font-size:14px;line-height:1.45;color:var(--ckf-fg);-webkit-font-smoothing:antialiased}\n.ckf-root :where(button,textarea){font:inherit;color:inherit;margin:0}\n.ckf-root :focus-visible{outline:2px solid var(--ckf-accent);outline-offset:2px}\n.ckf-scrim{position:fixed;inset:0;z-index:2147483002;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:16px;animation:ckf-fade .15s ease-out}\n.ckf-card{position:relative;width:100%;max-width:400px;max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--ckf-bg);color:var(--ckf-fg);border-radius:var(--ckf-radius);box-shadow:var(--ckf-shadow);padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px;animation:ckf-in .18s ease-out}\n.ckf-float{position:fixed;z-index:2147483001;right:20px;bottom:20px;width:340px;max-width:calc(100vw - 24px)}\n.ckf-top{display:flex;align-items:center;gap:8px;min-height:20px}\n.ckf-dots{display:flex;gap:4px}\n.ckf-dot{width:16px;height:4px;border-radius:4px;background:var(--ckf-line)}\n.ckf-dot[data-on]{background:var(--ckf-accent)}\n.ckf-x{margin-left:auto;width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--ckf-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1}\n.ckf-x:hover{background:var(--ckf-soft);color:var(--ckf-fg)}\n.ckf-h{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em;text-wrap:balance}\n.ckf-p{margin:0;color:var(--ckf-muted);text-wrap:pretty;white-space:pre-wrap}\n.ckf-small{margin:0;font-size:12px;color:var(--ckf-muted)}\n.ckf-opts{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}\n.ckf-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--ckf-line);border-radius:10px;background:var(--ckf-bg);text-align:left;cursor:pointer;font-weight:500}\n.ckf-opt:hover{background:var(--ckf-soft)}\n.ckf-opt[aria-checked=true]{border-color:var(--ckf-accent);background:color-mix(in srgb,var(--ckf-accent) 8%,var(--ckf-bg))}\n.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}\n.ckf-opt[aria-checked=true] .ckf-radio{border-color:var(--ckf-accent)}\n.ckf-opt[aria-checked=true] .ckf-radio::after{content:\"\";width:8px;height:8px;border-radius:50%;background:var(--ckf-accent)}\n.ckf-box{border-radius:10px;background:var(--ckf-soft);padding:12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}\n.ckf-big{font-size:22px;font-weight:650;font-variant-numeric:tabular-nums}\n.ckf-strike{color:var(--ckf-muted);text-decoration:line-through;font-variant-numeric:tabular-nums}\n.ckf-text{width:100%;min-height:64px;resize:vertical;border:1px solid var(--ckf-line);border-radius:10px;background:var(--ckf-bg);padding:8px 10px}\n.ckf-text::placeholder{color:var(--ckf-muted)}\n.ckf-btns{display:flex;flex-direction:column;gap:6px}\n.ckf-btn{height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--ckf-line);background:var(--ckf-bg);font-weight:600;cursor:pointer;transition:filter .1s linear,background-color .1s linear}\n.ckf-btn:hover{background:var(--ckf-soft)}\n.ckf-btn[disabled]{opacity:.55;cursor:not-allowed}\n.ckf-primary{background:var(--ckf-accent);border-color:var(--ckf-accent);color:var(--ckf-accent-ink)}\n.ckf-primary:hover{background:var(--ckf-accent);filter:brightness(1.07)}\n.ckf-danger{background:var(--ckf-danger);border-color:var(--ckf-danger);color:#fff}\n.ckf-danger:hover{background:var(--ckf-danger);filter:brightness(1.07)}\n.ckf-quiet{border-color:transparent;background:none;color:var(--ckf-muted);height:30px;font-weight:500}\n.ckf-quiet:hover{background:none;color:var(--ckf-fg)}\n.ckf-err{margin:0;color:var(--ckf-danger);font-size:13px;font-weight:500}\n.ckf-row{display:flex;justify-content:flex-end;gap:8px;align-items:center}\n.ckf-row .ckf-small{margin-right:auto}\n.ckf-media{display:block;width:100%;max-height:240px;object-fit:cover;border-radius:10px;background:var(--ckf-soft)}\n.ckf-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}\n.ckf-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}\n.ckf-arrow{position:absolute;width:12px;height:12px;margin:-6px;background:var(--ckf-bg);transform:rotate(45deg)}\n[data-side=bottom]>.ckf-arrow{top:0;left:var(--ckf-ap)}[data-side=top]>.ckf-arrow{top:100%;left:var(--ckf-ap)}\n[data-side=right]>.ckf-arrow{left:0;top:var(--ckf-ap)}[data-side=left]>.ckf-arrow{left:100%;top:var(--ckf-ap)}\n.ckf-check .ckf-go{margin-left:auto;align-self:center;color:var(--ckf-accent);font-weight:700}\n.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}\n.ckf-ic svg{width:20px;height:20px}.ckf-ic img{width:20px;height:20px;border-radius:5px;object-fit:cover}\n.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}\n.ckf-hic svg{width:22px;height:22px}.ckf-hic img{width:40px;height:40px;border-radius:12px;object-fit:cover}\n.ckf-input{width:100%;height:40px;border:1px solid var(--ckf-line);border-radius:10px;background:var(--ckf-bg);padding:0 12px}\n.ckf-input::placeholder{color:var(--ckf-muted)}\n.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}\n.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}\n.ckf-check:where(button){cursor:pointer}\n.ckf-check:where(button):hover{background:var(--ckf-soft)}\n.ckf-tick{width:18px;height:18px;flex:none;margin-top:1px;border-radius:50%;border:1.5px solid var(--ckf-line);display:inline-flex;align-items:center;justify-content:center;color:var(--ckf-accent-ink);font-size:11px;font-weight:700}\n.ckf-check[data-done] .ckf-tick{background:var(--ckf-accent);border-color:var(--ckf-accent)}\n.ckf-check[data-done] b{color:var(--ckf-muted);text-decoration:line-through}\n.ckf-check span{display:flex;flex-direction:column;gap:2px;min-width:0}\n.ckf-bar{height:4px;border-radius:4px;background:var(--ckf-soft);overflow:hidden}\n.ckf-bar i{display:block;height:100%;background:var(--ckf-accent)}\n.ckf-banner{position:fixed;z-index:2147483001;left:50%;top:12px;transform:translateX(-50%);width:min(640px,calc(100vw - 24px));background:var(--ckf-bg);border-radius:12px;box-shadow:var(--ckf-shadow);padding:10px 10px 10px 16px;display:flex;align-items:center;gap:12px;animation:ckf-in .18s ease-out}\n.ckf-banner>span{flex:1;min-width:0;display:flex;flex-direction:column}\n.ckf-banner .ckf-btn{height:32px}\n.ckf-pw{max-width:420px;gap:14px}\n.ckf-root[data-still] :is(.ckf-scrim,.ckf-card){animation:none}\n.ckf-li{display:flex;gap:10px;align-items:flex-start;margin:0}\n.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}\n.ckf-quote{margin:0;padding:12px 14px;border-radius:12px;background:var(--ckf-soft)}\n.ckf-quote cite{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--ckf-muted)}\n.ckf-plan{justify-content:space-between;min-height:52px}\n.ckf-plan span:nth-child(2){display:flex;flex-direction:column;margin-right:auto}\n.ckf-plan b{font-variant-numeric:tabular-nums}\n@keyframes ckf-fade{from{opacity:0}}\n@keyframes ckf-in{from{opacity:0;transform:translateY(6px)}}\n.ckf-banner{animation-name:ckf-fade}\n@media (max-width:520px){.ckf-scrim{align-items:flex-end;padding:0}.ckf-scrim .ckf-card{max-width:none;border-radius:var(--ckf-radius) var(--ckf-radius) 0 0;max-height:92dvh}.ckf-float{right:12px;bottom:12px}}\n@media (prefers-reduced-motion:reduce){.ckf-root *{animation:none!important;transition:none!important}}\n";
 export declare const mountFlows: (ctl: FlowsController, theme?: FlowsTheme) => (() => void);
 /**
  * Draws an open paywall (paywall.ts) page by page until the returned function is called: the dots, the page's title and

package/dist/flows-ui.js

@@ -1,5 +1,7 @@
 // src/flows-ui.ts
-import { discounted, money, offerButton } from "./flows.js";
+import { playFinish } from "./finish-web.js";
+import { answerOk, discounted, mediaOf, money, offerButton, videoEmbed } from "./flows.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)}
@@ -46,6 +48,19 @@ var FLOWS_CSS = `
 .ckf-err{margin:0;color:var(--ckf-danger);font-size:13px;font-weight:500}
 .ckf-row{display:flex;justify-content:flex-end;gap:8px;align-items:center}
 .ckf-row .ckf-small{margin-right:auto}
+.ckf-media{display:block;width:100%;max-height:240px;object-fit:cover;border-radius:10px;background:var(--ckf-soft)}
+.ckf-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
+.ckf-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
+.ckf-arrow{position:absolute;width:12px;height:12px;margin:-6px;background:var(--ckf-bg);transform:rotate(45deg)}
+[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}
@@ -115,10 +130,31 @@ var rootFor = (theme) => {
   document.body.appendChild(root);
   return root;
 };
+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 returnFocus = null;
   let comment = "";
@@ -287,8 +323,80 @@ var mountFlows = (ctl, theme = {}) => {
       )
     );
   };
+  const media = (s) => {
+    const m = mediaOf(s);
+    if (!m) return false;
+    if (m.kind === "image") return h("img", { className: "ckf-media", src: m.url, alt: m.alt ?? "", onLoad: () => follow() });
+    const v = videoEmbed(m.url);
+    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("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;
+    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 input = h("input", {
+        type: "text",
+        className: "ckf-input",
+        placeholder: q.placeholder || "Your answer",
+        "aria-labelledby": titleId,
+        maxlength: "500",
+        "data-ckf-id": "answer",
+        onInput: (e) => ctl.onboarding.answer(e.target.value),
+        onKeydown: (e) => e.key === "Enter" && ctl.onboarding.next()
+      });
+      input.value = v.answer ?? "";
+      field = input;
+    }
+    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)),
+        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("Back", "quiet", ctl.onboarding.back) : false,
+          button(s.button || (v.last ? "Done" : "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" },
@@ -298,6 +406,8 @@ var mountFlows = (ctl, theme = {}) => {
         v.total > 1 ? h("p", { className: "ckf-small" }, `Step ${v.index + 1} of ${v.total}`) : h("span"),
         closeButton("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" }))
@@ -307,8 +417,9 @@ var mountFlows = (ctl, theme = {}) => {
     const float = h("div", { className: "ckf-float" }, card);
     if (target) {
       const ring = h("div", { className: "ckf-ring", "aria-hidden": "true" });
-      placed = { float, ring, target };
-      place(float, ring, target);
+      float.append(h("span", { className: "ckf-arrow", "aria-hidden": "true" }));
+      placed = { float, ring, target, side: s.placement };
+      place(float, ring, target, s.placement);
       return h("div", {}, ring, float);
     }
     return float;
@@ -325,15 +436,31 @@ var mountFlows = (ctl, theme = {}) => {
       return null;
     }
   };
-  const place = (float, ring, target) => {
+  const place = (float, ring, target, side = "auto") => {
     const r = target.getBoundingClientRect();
     Object.assign(ring.style, { left: `${r.left - 4}px`, top: `${r.top - 4}px`, width: `${r.width + 8}px`, height: `${r.height + 8}px` });
-    const w = Math.min(340, window.innerWidth - 24);
-    const left = Math.max(12, Math.min(r.left, window.innerWidth - w - 12));
-    const below = r.bottom + 12;
-    Object.assign(float.style, { left: `${left}px`, right: "auto", width: `${w}px` });
-    if (below + 200 < window.innerHeight) Object.assign(float.style, { top: `${below}px`, bottom: "auto" });
-    else Object.assign(float.style, { top: "auto", bottom: `${Math.max(12, window.innerHeight - r.top + 12)}px` });
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const w = Math.min(340, vw - 24);
+    const ht = float.offsetHeight || 200;
+    const gap = 14;
+    const room = {
+      bottom: vh - r.bottom - gap - 12 >= ht,
+      top: r.top - gap - 12 >= ht,
+      right: vw - r.right - gap - 12 >= w,
+      left: r.left - gap - 12 >= w
+    };
+    const flip = { top: "bottom", bottom: "top", left: "right", right: "left" };
+    const order = side === "auto" || !flip[side] ? ["bottom", "top"] : [side, flip[side], "bottom", "top", "right", "left"];
+    const s = order.find((x) => room[x]) ?? (side !== "auto" && flip[side] ? side : r.top > vh - r.bottom ? "top" : "bottom");
+    const clamp = (v, hi) => Math.max(12, Math.min(v, hi - 12));
+    const across = s === "top" || s === "bottom";
+    const left = across ? clamp(side === "auto" ? r.left : r.left + r.width / 2 - w / 2, vw - w) : s === "right" ? r.right + gap : r.left - gap - w;
+    const top = across ? s === "bottom" ? r.bottom + gap : r.top - gap - ht : clamp(r.top + r.height / 2 - ht / 2, vh - ht);
+    Object.assign(float.style, { left: `${left}px`, top: `${top}px`, right: "auto", bottom: "auto", width: `${w}px` });
+    float.setAttribute("data-side", s);
+    const at = across ? r.left + r.width / 2 - left : r.top + r.height / 2 - top;
+    float.style.setProperty("--ckf-ap", `${Math.max(18, Math.min(at, (across ? w : ht) - 18))}px`);
   };
   const checklist = (v) => {
     const done = v.items.filter((i) => i.done).length;
@@ -358,11 +485,25 @@ var mountFlows = (ctl, theme = {}) => {
         h(
           "div",
           { className: "ckf-opts" },
-          ...v.items.map(({ step, done: d }) => {
+          ...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 && opens)
+              return h(
+                "button",
+                {
+                  type: "button",
+                  className: "ckf-check",
+                  "aria-label": `Start \u201C${step.title}\u201D`,
+                  "data-ckf-id": `t:${step.id}`,
+                  onClick: () => ctl.onboarding.open(step.id)
+                },
+                ...inner,
+                h("span", { className: "ckf-go", "aria-hidden": "true" }, "\u203A")
+              );
             return d || step.event ? h("div", { className: "ckf-check", "data-done": d, role: "listitem" }, ...inner) : h(
               "button",
               {
@@ -405,6 +546,13 @@ var mountFlows = (ctl, theme = {}) => {
   };
   const draw = () => {
     const v = ctl.view();
+    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"))
@@ -415,9 +563,10 @@ var mountFlows = (ctl, theme = {}) => {
     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();
@@ -431,11 +580,11 @@ 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();
-  };
-  const follow = () => {
-    if (placed) place(placed.float, placed.ring, placed.target);
+    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);
+  }
   document.addEventListener("keydown", onKey);
   window.addEventListener("resize", follow);
   window.addEventListener("scroll", follow, { passive: true, capture: true });