@goflowstate/widget-sdk 0.3.2 → 0.3.4

package/README.md

@@ -160,8 +160,9 @@ before the first state arrives.
 
 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`.
+button in the corner of the page. A tap opens a sheet with one field at once and takes a
+screenshot of the page behind it; the sheet shows "Taking a screenshot" until the picture is
+attached, and neither the icon nor the sheet is in it. 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
@@ -174,6 +175,12 @@ and shape of its main button, and its corner radius. To pin a role, set a custom
 }
 ```
 
+The sheet's type comes from the words the flow is drawing, not from `<body>`: the title takes
+the face, weight and letter spacing of the flow's largest heading, the note and the field take
+the face most of the flow's smaller text is set in, and the send button takes the face, weight,
+letter spacing and case of the flow's main button. Pin `--fs-feedback-font` or
+`--fs-feedback-font-display` when the reading is off.
+
 The button floats over the flow and belongs to the person using it. They can drag it anywhere,
 and it settles on the nearer side. A flick at an edge, or a drag into one, docks it there as a
 slim tab with the bug still showing; a tap on the tab opens the sheet, and pulling the tab

package/dist/canvas-widget-sdk.js

@@ -1,4 +1,4 @@
-// @goflowstate/widget-sdk v0.3.2
+// @goflowstate/widget-sdk v0.3.4
 // https://github.com/goflowstate/goflowstate-sdk
 
 "use strict";
@@ -159,6 +159,46 @@ var CanvasWidgetSDK = (() => {
     });
     return best;
   };
+  var TEXT_SAMPLE_LIMIT = 600;
+  var DISPLAY_MIN_PX = 22;
+  var sizeOf = (style) => {
+    const n = parseFloat(style.fontSize);
+    return Number.isFinite(n) && n > 0 ? n : 16;
+  };
+  var textSamples = (doc) => {
+    const out = [];
+    const all = doc.body.querySelectorAll("*");
+    for (let i = 0; i < all.length && out.length < TEXT_SAMPLE_LIMIT; i += 1) {
+      const el = all[i];
+      if (el.tagName === "SCRIPT" || el.tagName === "STYLE" || inOurs(el)) continue;
+      let chars = 0;
+      for (const node of Array.from(el.childNodes)) {
+        if (node.nodeType === 3) chars += (node.textContent ?? "").trim().length;
+      }
+      if (chars === 0 || !visible(el)) continue;
+      const style = styleOf(el);
+      if (!style.fontFamily) continue;
+      out.push({
+        family: style.fontFamily,
+        size: sizeOf(style),
+        chars,
+        style,
+        heading: /^H[1-3]$/.test(el.tagName)
+      });
+    }
+    return out;
+  };
+  var trackingEm = (style, min, max, fallback) => {
+    const px = style ? parseFloat(style.letterSpacing) : NaN;
+    const em = style && Number.isFinite(px) ? px / sizeOf(style) : fallback;
+    const held = Math.min(max, Math.max(min, em));
+    return held === 0 ? "0em" : `${Math.round(held * 1e3) / 1e3}em`;
+  };
+  var weightIn = (style, min, max, fallback) => {
+    const raw = style?.fontWeight ?? "";
+    const n = raw === "bold" ? 700 : raw === "normal" ? 400 : parseFloat(raw);
+    return Number.isFinite(n) ? String(Math.min(max, Math.max(min, n))) : fallback;
+  };
   function readFlowTheme(doc = document) {
     const body = doc.body;
     const stage = body.querySelector(":scope > :not(script):not(style):not([data-fs-feedback-host])");
@@ -181,12 +221,32 @@ var CanvasWidgetSDK = (() => {
     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(
+    const samples = textSamples(doc);
+    const headings = Array.from(doc.querySelectorAll('h1, h2, [class*="title"]')).filter(
       (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 largest = (items, size) => items.reduce(
+      (best, item) => best === null || size(item) > size(best) ? item : best,
+      null
+    );
+    const bigHeading = largest(
+      headings.filter((el) => sizeOf(styleOf(el)) >= DISPLAY_MIN_PX),
+      (el) => sizeOf(styleOf(el))
+    );
+    const bigLine = largest(
+      samples.filter((t) => t.size >= DISPLAY_MIN_PX && t.chars >= 3),
+      (t) => t.size
+    );
+    const headingStyle = bigHeading ? styleOf(bigHeading) : bigLine?.style ?? (headings[0] ? styleOf(headings[0]) : null);
+    const byFamily = /* @__PURE__ */ new Map();
+    for (const t of samples) {
+      if (t.size < DISPLAY_MIN_PX && !t.heading)
+        byFamily.set(t.family, (byFamily.get(t.family) ?? 0) + t.chars);
+    }
+    const readBody = largest(Array.from(byFamily), ([, chars]) => chars)?.[0] ?? "";
+    const fontBody = rootVar(doc, ["--fs-feedback-font"]) || readBody || (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 buttonType = buttonStyle?.fontFamily ? buttonStyle : null;
     const field = Array.from(
       doc.querySelectorAll('textarea, input[type="text"], input:not([type])')
     ).find((el) => !inOurs(el) && visible(el));
@@ -210,6 +270,11 @@ var CanvasWidgetSDK = (() => {
       fontBody,
       fontDisplay,
       displayWeight: headingStyle?.fontWeight || "500",
+      displayTracking: trackingEm(headingStyle, -0.04, 0.02, -0.01),
+      fontButton: buttonType?.fontFamily || fontBody,
+      buttonWeight: weightIn(buttonType, 500, 800, "600"),
+      buttonTracking: trackingEm(buttonType, -0.02, 0.08, 0),
+      buttonTransform: buttonType?.textTransform === "uppercase" ? "uppercase" : "none",
       radius,
       buttonRadius: buttonRadius === null ? "999px" : `${Math.min(buttonRadius, 999)}px`,
       dark
@@ -235,9 +300,10 @@ var CanvasWidgetSDK = (() => {
     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 { scrollX, scrollY } = window;
+    const { domToCanvas: domToCanvas2 } = await Promise.resolve().then(() => (init_modern_screenshot(), modern_screenshot_exports));
     const scale = Math.min(
       window.devicePixelRatio || 1,
       SCREENSHOT_MAX_SIDE / Math.max(width, height)
@@ -247,7 +313,7 @@ var CanvasWidgetSDK = (() => {
       height,
       scale,
       backgroundColor: ground,
-      style: { transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)` },
+      style: { transform: `translate(${-scrollX}px, ${-scrollY}px)` },
       filter: (node) => !(node instanceof Element && node.hasAttribute(FEEDBACK_HOST_ATTR))
     });
     return encodeScreenshot(canvas);
@@ -441,9 +507,15 @@ var CanvasWidgetSDK = (() => {
   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; }
+h2 {
+  margin: 2px 0 0; font-family: var(--font-display); font-weight: var(--display-weight);
+  font-size: 22px; line-height: 1.15; letter-spacing: var(--display-tracking); text-wrap: balance;
+}
 .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); }
+.ghost { display: none; width: 50px; height: 108px; border-radius: 8px; border: 1px solid var(--line); background: var(--fill); }
+.shot[data-pending] .ghost { display: block; }
+.shot[data-pending] img { display: none; }
 .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);
@@ -451,7 +523,9 @@ textarea {
 }
 textarea::placeholder { color: var(--ink-dim); }
 .send {
-  font: inherit; font-weight: 500; cursor: pointer; border: 0; padding: 14px;
+  font-family: var(--font-button); font-weight: var(--button-weight); font-size: 17px; line-height: 1.2;
+  letter-spacing: var(--button-tracking); text-transform: var(--button-transform);
+  cursor: pointer; border: 0; padding: 15px 14px;
   background: var(--cta); color: var(--cta-ink); border-radius: var(--button-radius);
 }
 .send[disabled] { opacity: 0.5; cursor: default; }
@@ -464,6 +538,8 @@ textarea::placeholder { color: var(--ink-dim); }
   }
   .bug svg { transition: transform 0.1s ease-out, width 0.22s ease, height 0.22s ease; }
   .sheet { animation: rise 0.22s ease-out; }
+  .shot[data-pending] .ghost { animation: wait 1.1s ease-in-out infinite alternate; }
+  @keyframes wait { from { opacity: 0.45; } to { opacity: 1; } }
   @keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
 }
 `;
@@ -484,7 +560,7 @@ textarea::placeholder { color: var(--ink-dim); }
 <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>
+  <div class="shot" hidden><span class="ghost" aria-hidden="true"></span><img alt="Screenshot of this page" /><span><span class="shot-label">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>
@@ -496,6 +572,7 @@ textarea::placeholder { color: var(--ink-dim); }
     const sheet = q(".sheet");
     const shot = q(".shot");
     const img = q(".shot img");
+    const shotLabel = q(".shot-label");
     const remove = q(".remove");
     const text = q("textarea");
     const status = q(".status");
@@ -706,6 +783,11 @@ textarea::placeholder { color: var(--ink-dim); }
         "--font-body": theme.fontBody,
         "--font-display": theme.fontDisplay,
         "--display-weight": theme.displayWeight,
+        "--display-tracking": theme.displayTracking,
+        "--font-button": theme.fontButton,
+        "--button-weight": theme.buttonWeight,
+        "--button-tracking": theme.buttonTracking,
+        "--button-transform": theme.buttonTransform,
         "--radius": theme.radius,
         "--button-radius": theme.buttonRadius
       };
@@ -715,15 +797,21 @@ textarea::placeholder { color: var(--ink-dim); }
     const sync = () => {
       send.disabled = busy || text.value.trim().length === 0;
     };
+    let round = 0;
+    let pending = null;
     const setShot = (url) => {
       screenshot = url;
       shot.hidden = url === null;
+      shot.removeAttribute("data-pending");
+      shotLabel.textContent = "Screenshot attached";
       if (url) img.src = url;
       else img.removeAttribute("src");
     };
     const close = () => {
       if (closeTimer) clearTimeout(closeTimer);
       closeTimer = null;
+      round += 1;
+      pending = null;
       sheet.hidden = true;
       scrim.hidden = true;
       bug.hidden = false;
@@ -734,20 +822,28 @@ textarea::placeholder { color: var(--ink-dim); }
       sync();
       schedulePlace();
     };
-    const open = async () => {
-      if (!sheet.hidden || busy) return;
-      busy = true;
+    const open = () => {
+      if (!sheet.hidden) return pending ?? Promise.resolve();
+      if (busy) return Promise.resolve();
       paint();
+      const mine = round += 1;
       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);
+      setShot(null);
+      shot.hidden = false;
+      shot.setAttribute("data-pending", "");
+      shotLabel.textContent = "Taking a screenshot";
       tuck.hidden = spot.state !== "float";
       scrim.hidden = false;
       sheet.hidden = false;
       sync();
-      text.focus();
+      const capture = options.capture ?? (() => captureViewport(theme.ground));
+      pending = withTimeout(Promise.resolve().then(capture), CAPTURE_TIMEOUT_MS).then((url) => {
+        if (mine !== round) return;
+        pending = null;
+        setShot(url);
+        if (!root.activeElement || root.activeElement === bug) text.focus();
+      });
+      return pending;
     };
     const submit = async () => {
       const message = text.value.trim();
@@ -755,6 +851,9 @@ textarea::placeholder { color: var(--ink-dim); }
       busy = true;
       sync();
       status.textContent = "";
+      const mine = round;
+      if (pending) await pending;
+      if (mine !== round) return;
       try {
         await options.submit({
           message,
@@ -778,6 +877,11 @@ textarea::placeholder { color: var(--ink-dim); }
       if (!suppressClick) void open();
     });
     bug.addEventListener("pointerdown", onDown);
+    if (!options.capture)
+      bug.addEventListener("pointerdown", () => void Promise.resolve().then(() => (init_modern_screenshot(), modern_screenshot_exports)).catch(() => {
+      }), {
+        once: true
+      });
     bug.addEventListener("pointermove", onMove);
     bug.addEventListener("pointerup", onUp);
     bug.addEventListener("pointercancel", onUp);
@@ -797,7 +901,11 @@ textarea::placeholder { color: var(--ink-dim); }
       );
     });
     scrim.addEventListener("click", close);
-    remove.addEventListener("click", () => setShot(null));
+    remove.addEventListener("click", () => {
+      round += 1;
+      pending = null;
+      setShot(null);
+    });
     text.addEventListener("input", sync);
     send.addEventListener("click", () => void submit());
     sheet.addEventListener("keydown", (event) => {