@goflowstate/widget-sdk 0.3.0 → 0.3.1

package/README.md

@@ -156,6 +156,27 @@ Claims are only ever the reader's own, and they are context, not
 authorization. `session.claims` is `null` for members, for PWA guests and
 before the first state arrives.
 
+## Flow feedback (the bug icon)
+
+A flow that calls `CanvasWidget.initSession()` carries the feedback icon with no code of its own.
+While the ring has feedback switched on, the session state says so and the SDK puts a round
+button in the corner of the page. A tap takes a screenshot of the page, then opens a sheet with
+one field. The note is sent through the flow's session to `POST /api/w/:slug/feedback`.
+
+The icon and the sheet take the look of the page they sit on: its fonts, ground, ink, the fill
+and shape of its main button, and its corner radius. To pin a role, set a custom property on
+`:root`:
+
+```css
+:root {
+  --fs-feedback-cta: #5136c4; /* also -cta-ink, -ground, -ink, -font, -font-display, -radius */
+  --fs-feedback-bottom: 96px; /* where the icon sits; also -right */
+}
+```
+
+Name each screen so a report says where it came from: `document.body.dataset.pageKey = 'question-2'`.
+A page that must not show the icon (a projected wall) sets `<html data-fs-feedback="off">`.
+
 ## Full API Reference
 
 See the [Flowstate developer docs](https://developer.goflowstate.com/docs/) for the complete API reference, the manifest format, the AI integration guide, and the submission pipeline.

package/dist/canvas-widget-sdk.js

@@ -1,4 +1,4 @@
-// @goflowstate/widget-sdk v0.3.0
+// @goflowstate/widget-sdk v0.3.1
 // https://github.com/goflowstate/goflowstate-sdk
 
 "use strict";
@@ -7,6 +7,9 @@ var CanvasWidgetSDK = (() => {
   var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
   var __getOwnPropNames = Object.getOwnPropertyNames;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __esm = (fn, res) => function __init() {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  };
   var __export = (target, all) => {
     for (var name in all)
       __defProp(target, name, { get: all[name], enumerable: true });
@@ -21,6 +24,18 @@ var CanvasWidgetSDK = (() => {
   };
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+  // no-rasterizer:modern-screenshot
+  var modern_screenshot_exports = {};
+  __export(modern_screenshot_exports, {
+    domToCanvas: () => domToCanvas
+  });
+  var domToCanvas;
+  var init_modern_screenshot = __esm({
+    "no-rasterizer:modern-screenshot"() {
+      domToCanvas = () => Promise.reject(new Error("no rasterizer in the script-tag bundle"));
+    }
+  });
+
   // src/sdk.ts
   var sdk_exports = {};
   __export(sdk_exports, {
@@ -62,6 +77,389 @@ var CanvasWidgetSDK = (() => {
     };
   }
 
+  // src/feedback.ts
+  var FEEDBACK_HOST_ATTR = "data-fs-feedback-host";
+  var SCREENSHOT_MAX_BYTES = 15e4;
+  var SCREENSHOT_MAX_SIDE = 1280;
+  var CAPTURE_TIMEOUT_MS = 4e3;
+  function parseColor(raw) {
+    const value = (raw ?? "").trim().toLowerCase();
+    if (!value || value === "transparent") return null;
+    const hex = /^#([0-9a-f]{3,8})$/.exec(value);
+    if (hex) {
+      const h = hex[1];
+      const full = h.length <= 4 ? h.split("").map((c) => c + c).join("") : h;
+      if (full.length !== 6 && full.length !== 8) return null;
+      const n = (i) => parseInt(full.slice(i, i + 2), 16);
+      return [n(0), n(2), n(4), full.length === 8 ? n(6) / 255 : 1];
+    }
+    const fn = /^rgba?\(([^)]+)\)$/.exec(value);
+    if (!fn) return null;
+    const parts = fn[1].split(/[\s,/]+/).filter(Boolean);
+    if (parts.length < 3) return null;
+    const channel = (p) => p.endsWith("%") ? parseFloat(p) * 255 / 100 : parseFloat(p);
+    const alpha = parts[3] === void 0 ? 1 : parts[3].endsWith("%") ? parseFloat(parts[3]) / 100 : parseFloat(parts[3]);
+    const out = [channel(parts[0]), channel(parts[1]), channel(parts[2]), alpha];
+    return out.some((v) => Number.isNaN(v)) ? null : out;
+  }
+  var opaque = (c) => c !== null && c[3] >= 0.9;
+  var css = (c, alpha = c[3]) => alpha >= 1 ? `rgb(${Math.round(c[0])}, ${Math.round(c[1])}, ${Math.round(c[2])})` : `rgba(${Math.round(c[0])}, ${Math.round(c[1])}, ${Math.round(c[2])}, ${alpha})`;
+  var mix = (a, b, t) => [
+    a[0] + (b[0] - a[0]) * t,
+    a[1] + (b[1] - a[1]) * t,
+    a[2] + (b[2] - a[2]) * t,
+    1
+  ];
+  var luminance = (c) => {
+    const lin = (v) => {
+      const s = v / 255;
+      return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * lin(c[0]) + 0.7152 * lin(c[1]) + 0.0722 * lin(c[2]);
+  };
+  var contrast = (a, b) => {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+  };
+  var WHITE = [255, 255, 255, 1];
+  var BLACK = [17, 17, 20, 1];
+  var styleOf = (el) => getComputedStyle(el);
+  var rootVar = (doc, names) => {
+    for (const el of [doc.documentElement, doc.body]) {
+      if (!el) continue;
+      const style = styleOf(el);
+      for (const name of names) {
+        const value = style.getPropertyValue(name).trim();
+        if (value) return value;
+      }
+    }
+    return "";
+  };
+  var visible = (el) => {
+    const rect = el.getBoundingClientRect();
+    const style = styleOf(el);
+    return style.display !== "none" && style.visibility !== "hidden" && rect.width * rect.height >= 0;
+  };
+  var inOurs = (el) => el.closest(`[${FEEDBACK_HOST_ATTR}]`) !== null;
+  var primaryButton = (doc, ground) => {
+    let best = null;
+    let bestArea = -1;
+    doc.querySelectorAll(
+      'button, [role="button"], input[type="submit"], a[class*="btn"], a[class*="cta"]'
+    ).forEach((el) => {
+      if (inOurs(el) || !visible(el)) return;
+      const fill = parseColor(styleOf(el).backgroundColor);
+      if (!opaque(fill) || contrast(fill, ground) < 1.25) return;
+      const rect = el.getBoundingClientRect();
+      const area = rect.width * rect.height;
+      if (area > bestArea) {
+        best = el;
+        bestArea = area;
+      }
+    });
+    return best;
+  };
+  function readFlowTheme(doc = document) {
+    const body = doc.body;
+    const stage = body.querySelector(":scope > :not(script):not(style):not([data-fs-feedback-host])");
+    const bodyStyle = styleOf(body);
+    const sampledGround = [stage, body, doc.documentElement].map((el) => el ? parseColor(styleOf(el).backgroundColor) : null).find(opaque);
+    const sampledInk = parseColor((stage ? styleOf(stage) : bodyStyle).color) ?? parseColor(bodyStyle.color);
+    const tokenGround = parseColor(rootVar(doc, ["--sb-ground", "--sb-bg", "--color-ink-050"]));
+    const ink0 = parseColor(rootVar(doc, ["--fs-feedback-ink"])) ?? sampledInk;
+    let ground = parseColor(rootVar(doc, ["--fs-feedback-ground"])) ?? sampledGround ?? (tokenGround && opaque(tokenGround) ? tokenGround : null) ?? (ink0 && luminance(ink0) > 0.5 ? BLACK : WHITE);
+    ground = [ground[0], ground[1], ground[2], 1];
+    const dark = luminance(ground) < 0.35;
+    let ink = ink0 && contrast([ink0[0], ink0[1], ink0[2], 1], ground) >= 4.5 ? ink0 : dark ? WHITE : BLACK;
+    ink = [ink[0], ink[1], ink[2], 1];
+    const button = primaryButton(doc, ground);
+    const buttonStyle = button ? styleOf(button) : null;
+    const pinnedCta = parseColor(rootVar(doc, ["--fs-feedback-cta"]));
+    const tokenCta = parseColor(rootVar(doc, ["--sb-cta", "--sb-accent", "--color-cream"]));
+    const sampledCta = buttonStyle ? parseColor(buttonStyle.backgroundColor) : null;
+    const cta = pinnedCta ?? sampledCta ?? (tokenCta && contrast(tokenCta, ground) >= 1.25 ? tokenCta : null) ?? ink;
+    const pinnedCtaInk = parseColor(rootVar(doc, ["--fs-feedback-cta-ink"]));
+    const sampledCtaInk = !pinnedCta && sampledCta && buttonStyle ? parseColor(buttonStyle.color) : null;
+    const ctaInk = pinnedCtaInk ?? (sampledCtaInk && contrast(sampledCtaInk, cta) >= 3 ? sampledCtaInk : null) ?? (luminance(cta) > 0.4 ? BLACK : WHITE);
+    const heading = Array.from(doc.querySelectorAll('h1, h2, [class*="title"]')).find(
+      (el) => !inOurs(el) && visible(el)
+    );
+    const headingStyle = heading ? styleOf(heading) : null;
+    const fontBody = rootVar(doc, ["--fs-feedback-font"]) || (stage ? styleOf(stage).fontFamily : "") || bodyStyle.fontFamily || rootVar(doc, ["--sb-font-body", "--font-body"]) || "system-ui, sans-serif";
+    const fontDisplay = rootVar(doc, ["--fs-feedback-font-display"]) || headingStyle?.fontFamily || rootVar(doc, ["--sb-font-display", "--sb-font-title", "--font-display"]) || fontBody;
+    const field = Array.from(
+      doc.querySelectorAll('textarea, input[type="text"], input:not([type])')
+    ).find((el) => !inOurs(el) && visible(el));
+    const px = (value) => {
+      const n = parseFloat(value ?? "");
+      return Number.isFinite(n) ? n : null;
+    };
+    const cornerOf = (style) => style ? px(style.borderTopLeftRadius || style.borderRadius) : null;
+    const buttonRadius = cornerOf(buttonStyle);
+    const fieldRadius = cornerOf(field ? styleOf(field) : null);
+    const radius = rootVar(doc, ["--fs-feedback-radius"]) || `${Math.min(fieldRadius ?? Math.min(buttonRadius ?? 16, 22), 28)}px`;
+    return {
+      ground: css(ground),
+      surface: css(dark ? mix(ground, WHITE, 0.07) : mix(ground, WHITE, 0.6)),
+      ink: css(ink),
+      inkDim: css(mix(ink, ground, 0.32)),
+      line: css(ink, 0.16),
+      fill: css(ink, 0.05),
+      cta: css([cta[0], cta[1], cta[2], 1]),
+      ctaInk: css([ctaInk[0], ctaInk[1], ctaInk[2], 1]),
+      fontBody,
+      fontDisplay,
+      displayWeight: headingStyle?.fontWeight || "500",
+      radius,
+      buttonRadius: buttonRadius === null ? "999px" : `${Math.min(buttonRadius, 999)}px`,
+      dark
+    };
+  }
+  var dataUrlBytes = (url) => Math.floor((url.length - url.indexOf(",") - 1) * 3 / 4);
+  function encodeScreenshot(canvas) {
+    let source = canvas;
+    for (let pass = 0; pass < 3; pass += 1) {
+      for (const quality of [0.82, 0.7, 0.58, 0.46, 0.34]) {
+        const url = source.toDataURL("image/jpeg", quality);
+        if (url.startsWith("data:image/jpeg") && dataUrlBytes(url) <= SCREENSHOT_MAX_BYTES)
+          return url;
+      }
+      const smaller = document.createElement("canvas");
+      smaller.width = Math.max(1, Math.round(source.width * 0.75));
+      smaller.height = Math.max(1, Math.round(source.height * 0.75));
+      const ctx = smaller.getContext("2d");
+      if (!ctx) return null;
+      ctx.drawImage(source, 0, 0, smaller.width, smaller.height);
+      source = smaller;
+    }
+    return null;
+  }
+  async function captureViewport(ground) {
+    const { domToCanvas: domToCanvas2 } = await Promise.resolve().then(() => (init_modern_screenshot(), modern_screenshot_exports));
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const scale = Math.min(
+      window.devicePixelRatio || 1,
+      SCREENSHOT_MAX_SIDE / Math.max(width, height)
+    );
+    const canvas = await domToCanvas2(document.documentElement, {
+      width,
+      height,
+      scale,
+      backgroundColor: ground,
+      style: { transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)` },
+      filter: (node) => !(node instanceof Element && node.hasAttribute(FEEDBACK_HOST_ATTR))
+    });
+    return encodeScreenshot(canvas);
+  }
+  var withTimeout = (work, ms) => new Promise((resolve) => {
+    const timer = setTimeout(() => resolve(null), ms);
+    work.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      () => {
+        clearTimeout(timer);
+        resolve(null);
+      }
+    );
+  });
+  var BUG_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="7" width="8" height="12" rx="4"/><path d="M9.5 7a2.5 2.5 0 0 1 5 0M12 11v8M4 13h4M16 13h4M5 7l3.2 2.4M19 7l-3.2 2.4M5 20l3.2-2.6M19 20l-3.2-2.6"/></svg>';
+  var STYLE = `
+:host { all: initial; }
+* { box-sizing: border-box; }
+.bug {
+  position: fixed; z-index: 2147483000;
+  right: calc(var(--fs-feedback-right, 14px) + env(safe-area-inset-right, 0px));
+  bottom: calc(var(--fs-feedback-bottom, 88px) + env(safe-area-inset-bottom, 0px));
+  width: 44px; height: 44px; border-radius: 50%; padding: 0;
+  display: grid; place-items: center; cursor: pointer;
+  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
+  -webkit-tap-highlight-color: transparent;
+}
+.bug svg { width: 20px; height: 20px; }
+.bug:focus-visible, .send:focus-visible, .link:focus-visible, textarea:focus-visible {
+  outline: 2px solid var(--ink); outline-offset: 2px;
+}
+.scrim { position: fixed; inset: 0; z-index: 2147483001; background: rgba(0, 0, 0, 0.42); }
+.sheet {
+  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483002;
+  margin: 0 auto; max-width: 480px;
+  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-bottom: 0;
+  border-radius: calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0;
+  padding: 12px 18px calc(20px + env(safe-area-inset-bottom, 0px));
+  display: flex; flex-direction: column; gap: 12px;
+  font-family: var(--font-body); font-size: 15px; line-height: 1.4;
+}
+.grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; }
+h2 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 19px; line-height: 1.2; }
+.shot { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--ink-dim); }
+.shot img { width: 50px; max-height: 108px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); }
+.link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
+textarea {
+  width: 100%; min-height: 84px; resize: none; font: inherit; font-size: 16px; color: var(--ink);
+  background: var(--fill); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px;
+}
+textarea::placeholder { color: var(--ink-dim); }
+.send {
+  font: inherit; font-weight: 500; cursor: pointer; border: 0; padding: 14px;
+  background: var(--cta); color: var(--cta-ink); border-radius: var(--button-radius);
+}
+.send[disabled] { opacity: 0.5; cursor: default; }
+.status { margin: 0; font-size: 13px; color: var(--ink-dim); min-height: 1.4em; }
+[hidden] { display: none !important; }
+@media (prefers-reduced-motion: no-preference) {
+  .sheet { animation: rise 0.22s ease-out; }
+  @keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
+}
+`;
+  var mounted = null;
+  var feedbackOptedOut = (doc = document) => doc.documentElement.getAttribute("data-fs-feedback") === "off";
+  function mountFlowFeedback(options) {
+    if (typeof document === "undefined" || !document.body) return null;
+    if (mounted) return mounted;
+    if (feedbackOptedOut()) return null;
+    const host = document.createElement("div");
+    host.setAttribute(FEEDBACK_HOST_ATTR, "");
+    const root = host.attachShadow({ mode: "open" });
+    root.innerHTML = `<style>${STYLE}</style>
+<button type="button" class="bug" aria-label="Send feedback on this page">${BUG_ICON}</button>
+<div class="scrim" hidden></div>
+<div class="sheet" role="dialog" aria-modal="true" aria-labelledby="fsf-title" hidden>
+  <div class="grab" aria-hidden="true"></div>
+  <h2 id="fsf-title">Feedback on this page</h2>
+  <div class="shot" hidden><img alt="Screenshot of this page" /><span><span>Screenshot attached</span><br /><button type="button" class="link remove">Remove screenshot</button></span></div>
+  <textarea aria-labelledby="fsf-title" placeholder="What should change?" maxlength="2000"></textarea>
+  <p class="status" role="status" aria-live="polite"></p>
+  <button type="button" class="send" disabled>Send feedback</button>
+</div>`;
+    const q = (selector) => root.querySelector(selector);
+    const bug = q(".bug");
+    const scrim = q(".scrim");
+    const sheet = q(".sheet");
+    const shot = q(".shot");
+    const img = q(".shot img");
+    const remove = q(".remove");
+    const text = q("textarea");
+    const status = q(".status");
+    const send = q(".send");
+    let theme = readFlowTheme();
+    let screenshot = null;
+    let busy = false;
+    let closeTimer = null;
+    const paint = () => {
+      theme = readFlowTheme();
+      const vars = {
+        "--surface": theme.surface,
+        "--ink": theme.ink,
+        "--ink-dim": theme.inkDim,
+        "--line": theme.line,
+        "--fill": theme.fill,
+        "--cta": theme.cta,
+        "--cta-ink": theme.ctaInk,
+        "--font-body": theme.fontBody,
+        "--font-display": theme.fontDisplay,
+        "--display-weight": theme.displayWeight,
+        "--radius": theme.radius,
+        "--button-radius": theme.buttonRadius
+      };
+      for (const [name, value] of Object.entries(vars)) host.style.setProperty(name, value);
+      host.style.colorScheme = theme.dark ? "dark" : "light";
+    };
+    const sync = () => {
+      send.disabled = busy || text.value.trim().length === 0;
+    };
+    const setShot = (url) => {
+      screenshot = url;
+      shot.hidden = url === null;
+      if (url) img.src = url;
+      else img.removeAttribute("src");
+    };
+    const close = () => {
+      if (closeTimer) clearTimeout(closeTimer);
+      closeTimer = null;
+      sheet.hidden = true;
+      scrim.hidden = true;
+      bug.hidden = false;
+      setShot(null);
+      text.value = "";
+      status.textContent = "";
+      busy = false;
+      sync();
+    };
+    const open = async () => {
+      if (!sheet.hidden || busy) return;
+      busy = true;
+      paint();
+      bug.hidden = true;
+      const capture = options.capture ?? (() => captureViewport(theme.ground));
+      const url = await withTimeout(Promise.resolve().then(capture), CAPTURE_TIMEOUT_MS);
+      busy = false;
+      setShot(url);
+      scrim.hidden = false;
+      sheet.hidden = false;
+      sync();
+      text.focus();
+    };
+    const submit = async () => {
+      const message = text.value.trim();
+      if (!message || busy) return;
+      busy = true;
+      sync();
+      status.textContent = "";
+      try {
+        await options.submit({
+          message,
+          ...screenshot ? { screenshot } : {},
+          ...document.body.dataset.pageKey ? { pageKey: document.body.dataset.pageKey } : {},
+          pagePath: window.location.pathname.slice(-200),
+          viewport: { width: window.innerWidth, height: window.innerHeight }
+        });
+        status.textContent = "Sent.";
+        closeTimer = setTimeout(() => {
+          close();
+          bug.focus();
+        }, 1200);
+      } catch {
+        busy = false;
+        status.textContent = "That did not send. Try again.";
+        sync();
+      }
+    };
+    bug.addEventListener("click", () => void open());
+    scrim.addEventListener("click", close);
+    remove.addEventListener("click", () => setShot(null));
+    text.addEventListener("input", sync);
+    send.addEventListener("click", () => void submit());
+    sheet.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        close();
+        bug.focus();
+      }
+      event.stopPropagation();
+    });
+    document.body.appendChild(host);
+    paint();
+    options.onReady?.();
+    mounted = {
+      host,
+      refresh: () => {
+        if (sheet.hidden) paint();
+      },
+      open,
+      close,
+      unmount: () => {
+        if (closeTimer) clearTimeout(closeTimer);
+        host.remove();
+        mounted = null;
+      }
+    };
+    return mounted;
+  }
+  var unmountFlowFeedback = () => mounted?.unmount();
+
   // src/session.ts
   function readSessionLaunchParams() {
     if (typeof window === "undefined") return null;
@@ -149,11 +547,13 @@ var CanvasWidgetSDK = (() => {
     apiBase;
     tokenPromise;
     opener;
+    hostOrigin;
     constructor(params, opener) {
       this.slug = params.slug;
       this.webBase = params.webBase;
       this.mobileBase = params.mobileBase ?? null;
       this.apiBase = params.apiBase;
+      this.hostOrigin = hostOriginOf(params);
       this.opener = opener ?? parentOpener(hostOriginOf(params));
       this.tokenPromise = this.acquireTicket(params).then((t) => this.redeem(t));
     }
@@ -187,13 +587,32 @@ var CanvasWidgetSDK = (() => {
       }
       const json = await res.json();
       const data = json.data;
-      const view = toStateView(data.state ?? data);
+      const wire = data.state ?? data;
+      const view = toStateView(wire);
       this.latestClaims = view.viewer?.claims ?? null;
+      this.syncFeedback(wire.feedbackEnabled === true);
       return view;
     }
     get claims() {
       return this.latestClaims;
     }
+    /** Flow feedback: every state read says whether the bug icon is on for this ring. On, the
+     *  icon mounts once and re-reads the page's look on each read; off, it leaves. */
+    syncFeedback(enabled) {
+      if (typeof document === "undefined") return;
+      if (!enabled) {
+        unmountFlowFeedback();
+        return;
+      }
+      const handle = mountFlowFeedback({
+        submit: (report) => this.request("feedback", report),
+        onReady: () => {
+          if (window.parent !== window)
+            window.parent.postMessage({ type: "flowstate:feedback-ready" }, this.hostOrigin);
+        }
+      });
+      handle?.refresh();
+    }
     join() {
       return this.call("/enter", { method: "POST" });
     }