@goflowstate/widget-sdk 0.3.2 → 0.3.4

package/dist/feedback.d.ts

@@ -23,6 +23,12 @@ export interface FlowFeedbackTheme {
     fontBody: string;
     fontDisplay: string;
     displayWeight: string;
+    /** Letter spacing of the flow's titles, in em, so it scales to the sheet's title size. */
+    displayTracking: string;
+    fontButton: string;
+    buttonWeight: string;
+    buttonTracking: string;
+    buttonTransform: string;
     radius: string;
     buttonRadius: string;
     dark: boolean;
@@ -41,7 +47,8 @@ export interface FlowFeedbackOptions {
     /** Sends the report. The session client passes `session.request('feedback', report)`. */
     submit: (report: FlowFeedbackReport) => Promise<unknown>;
     /** Renders the page to a JPEG data URL, or null when it cannot. Defaults to the built-in
-     *  rasterizer; tests and unusual hosts pass their own. */
+     *  rasterizer; tests and unusual hosts pass their own. It runs while the sheet is already
+     *  open, so a host's own capture must leave the feedback host element out of the picture. */
     capture?: () => Promise<string | null>;
     /** Called once the icon is on the page, so a host page can hide its own fallback. */
     onReady?: () => void;

package/dist/feedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../src/feedback.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../src/feedback.ts"],"names":[],"mappings":"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"}

package/dist/index.mjs

@@ -1,4 +1,4 @@
-// @goflowstate/widget-sdk v0.3.2
+// @goflowstate/widget-sdk v0.3.4
 // https://github.com/goflowstate/goflowstate-sdk
 
 var __defProp = Object.defineProperty;
@@ -121,6 +121,46 @@ var primaryButton = (doc, ground) => {
   });
   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])");
@@ -143,12 +183,32 @@ function readFlowTheme(doc = document) {
   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));
@@ -172,6 +232,11 @@ function readFlowTheme(doc = document) {
     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
@@ -197,9 +262,10 @@ function encodeScreenshot(canvas) {
   return null;
 }
 async function captureViewport(ground) {
-  const { domToCanvas } = await import("modern-screenshot");
   const width = window.innerWidth;
   const height = window.innerHeight;
+  const { scrollX, scrollY } = window;
+  const { domToCanvas } = await import("modern-screenshot");
   const scale = Math.min(
     window.devicePixelRatio || 1,
     SCREENSHOT_MAX_SIDE / Math.max(width, height)
@@ -209,7 +275,7 @@ async function captureViewport(ground) {
     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);
@@ -403,9 +469,15 @@ var STYLE = `
   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);
@@ -413,7 +485,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; }
@@ -426,6 +500,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; } }
 }
 `;
@@ -446,7 +522,7 @@ function mountFlowFeedback(options) {
 <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>
@@ -458,6 +534,7 @@ function mountFlowFeedback(options) {
   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");
@@ -668,6 +745,11 @@ function mountFlowFeedback(options) {
       "--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
     };
@@ -677,15 +759,21 @@ function mountFlowFeedback(options) {
   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;
@@ -696,20 +784,28 @@ function mountFlowFeedback(options) {
     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();
@@ -717,6 +813,9 @@ function mountFlowFeedback(options) {
     busy = true;
     sync();
     status.textContent = "";
+    const mine = round;
+    if (pending) await pending;
+    if (mine !== round) return;
     try {
       await options.submit({
         message,
@@ -740,6 +839,11 @@ function mountFlowFeedback(options) {
     if (!suppressClick) void open();
   });
   bug.addEventListener("pointerdown", onDown);
+  if (!options.capture)
+    bug.addEventListener("pointerdown", () => void import("modern-screenshot").catch(() => {
+    }), {
+      once: true
+    });
   bug.addEventListener("pointermove", onMove);
   bug.addEventListener("pointerup", onUp);
   bug.addEventListener("pointercancel", onUp);
@@ -759,7 +863,11 @@ function mountFlowFeedback(options) {
     );
   });
   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) => {