fontdue-js 3.2.0 → 3.2.2

package/dist/components/TestFontsForm/index.js

@@ -5,7 +5,10 @@ import _TestFontsForm_Query from "../../__generated__/TestFontsForm_Query.graphq
 import _TestFontsFormUpdateCustomerMutation from "../../__generated__/TestFontsFormUpdateCustomerMutation.graphql.js";
 import React, { useState, useRef, useCallback } from 'react';
 import { commitMutation, graphql, useRelayEnvironment, useLazyLoadQuery, usePreloadedQuery } from 'react-relay';
-import { ReCAPTCHA } from 'react-google-recaptcha';
+// The script-injecting reCAPTCHA wrapper (loads Google's api.js). Importing the
+// package's barebone named export instead was the FD-917 root cause; see
+// ../Recaptcha for the full explanation.
+import { ReCAPTCHA } from '../Recaptcha.js';
 import TextField from '../TextField/index.js';
 import { DownloadFonts } from '../Icons/index.js';
 import TestFontsFormQueryNode from '../../__generated__/TestFontsForm_Query.graphql.js';
@@ -13,6 +16,7 @@ import Checkbox from '../Checkbox/index.js';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
 import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 const updateCustomerMutation = (_TestFontsFormUpdateCustomerMutation.hash && _TestFontsFormUpdateCustomerMutation.hash !== "ba56958399f0893bd667ff02c33a6975" && console.error("The definition of 'TestFontsFormUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsFormUpdateCustomerMutation);
 const TestFontsDownloading = _ref => {
   let {
@@ -46,11 +50,13 @@ const TestFontsFormComponent = _ref2 => {
   const [pendingSubmit, setPendingSubmit] = useState(false);
   const downloadForm = useRef(null);
   const recaptchaRef = useRef(null);
+  const recaptchaTimeout = useRecaptchaTimeout();
   const environment = useRelayEnvironment();
   if (!data.viewer) return null;
   const recaptchaEnabled = ((_data$viewer$settings = data.viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.recaptchaEnabled) ?? false;
   const recaptchaSiteKey = (_data$viewer$settings2 = data.viewer.settings) === null || _data$viewer$settings2 === void 0 ? void 0 : _data$viewer$settings2.recaptchaSiteKey;
   const submitForm = useCallback(token => {
+    recaptchaTimeout.clear();
     setSubmitting(true);
     setPendingSubmit(false);
     setError(null);
@@ -92,7 +98,7 @@ const TestFontsFormComponent = _ref2 => {
         setRecaptchaToken(null);
       }
     });
-  }, [environment, name, email, newsletterOptIn]);
+  }, [environment, name, email, newsletterOptIn, recaptchaTimeout]);
   const handleRecaptchaChange = useCallback(token => {
     setRecaptchaToken(token);
     // If we were waiting for a token to submit, do it now
@@ -103,6 +109,20 @@ const TestFontsFormComponent = _ref2 => {
   const handleRecaptchaExpired = useCallback(() => {
     setRecaptchaToken(null);
   }, []);
+
+  // Recover cleanly when the reCAPTCHA widget can't produce a token, so the
+  // button doesn't sit on “Submitting…” forever if the widget fails to load.
+  const abortRecaptcha = useCallback(() => {
+    var _recaptchaRef$current3;
+    recaptchaTimeout.clear();
+    setPendingSubmit(false);
+    setRecaptchaToken(null);
+    (_recaptchaRef$current3 = recaptchaRef.current) === null || _recaptchaRef$current3 === void 0 ? void 0 : _recaptchaRef$current3.reset();
+    setError(RECAPTCHA_UNAVAILABLE_MESSAGE);
+  }, [recaptchaTimeout]);
+  const handleRecaptchaErrored = useCallback(() => {
+    if (pendingSubmit) abortRecaptcha();
+  }, [pendingSubmit, abortRecaptcha]);
   const handleSubmit = e => {
     e.preventDefault();
     if (!eulaAgreed) {
@@ -112,10 +132,17 @@ const TestFontsFormComponent = _ref2 => {
 
     // If reCAPTCHA is enabled but no token, execute it and wait for callback
     if (recaptchaEnabled && recaptchaSiteKey && !recaptchaToken) {
-      var _recaptchaRef$current3;
+      var _recaptchaRef$current4;
       setPendingSubmit(true);
       setError(null);
-      (_recaptchaRef$current3 = recaptchaRef.current) === null || _recaptchaRef$current3 === void 0 ? void 0 : _recaptchaRef$current3.execute();
+      // Safety net: give up if no token arrives and the reCAPTCHA script never
+      // loaded (a challenge in progress keeps `grecaptcha` defined, so we don't
+      // cancel on a user who's mid-challenge).
+      recaptchaTimeout.start(() => {
+        if (isRecaptchaScriptLoaded()) return;
+        abortRecaptcha();
+      });
+      (_recaptchaRef$current4 = recaptchaRef.current) === null || _recaptchaRef$current4 === void 0 ? void 0 : _recaptchaRef$current4.execute();
       return;
     }
     submitForm(recaptchaToken);
@@ -181,7 +208,8 @@ const TestFontsFormComponent = _ref2 => {
     sitekey: recaptchaSiteKey,
     size: "invisible",
     onChange: handleRecaptchaChange,
-    onExpired: handleRecaptchaExpired
+    onExpired: handleRecaptchaExpired,
+    onErrored: handleRecaptchaErrored
   }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     className: "submit-button",
     type: "submit",

package/dist/components/TypeTester/TypeTesterStandaloneElement.js

@@ -10,6 +10,11 @@ const isDirection = str => {
 };
 const parseBool = input => input === 'true' ? true : false;
 
+// Split a comma-separated attribute into trimmed, non-empty tokens, so that
+// `axes="wght, opsz"` behaves the same as `axes="wght,opsz"` and a trailing
+// comma doesn't produce a bogus empty entry.
+const splitList = input => (input === null || input === void 0 ? void 0 : input.split(',').map(token => token.trim()).filter(Boolean)) ?? [];
+
 // parse a string like "wdth 1000, ital 0.5" into
 // [{ axis: "wdth", value: 1000 }, { axis: "ital", value: 0.5 }]
 function parseVariableSettings(input) {
@@ -45,12 +50,12 @@ export const TypeTesterStandaloneElement = _ref => {
     lineHeight: lineHeight ? parseFloat(lineHeight) : undefined,
     letterSpacing: letterSpacing ? parseFloat(letterSpacing) : undefined,
     fontSize: fontSize ? parseFloat(fontSize) : undefined,
-    axes: (axes === null || axes === void 0 ? void 0 : axes.split(',')) ?? [],
-    features: (features === null || features === void 0 ? void 0 : features.split(',')) ?? [],
-    featureSettings: featuresSelected === null || featuresSelected === void 0 ? void 0 : featuresSelected.split(',').map(feature => ({
+    axes: splitList(axes),
+    features: splitList(features),
+    featureSettings: featuresSelected ? splitList(featuresSelected).map(feature => ({
       feature,
       value: '1'
-    })),
+    })) : undefined,
     alignment: isAlignment(alignment) ? alignment : undefined,
     direction: isDirection(direction) ? direction : undefined,
     variableSettings: parseVariableSettings(variableSettings)

package/dist/components/TypeTester/TypeTesterVariableAxes.js

@@ -17,6 +17,22 @@ const TypeTesterVariableAxes = _ref => {
     id
   });
   const fontStyle = useFragment((_TypeTesterVariableAxes_fontStyle.hash && _TypeTesterVariableAxes_fontStyle.hash !== "a73e45dbb7a154107456088125a01f88" && console.error("The definition of 'TypeTesterVariableAxes_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterVariableAxes_fontStyle), fontStyleKey);
+
+  // Warn when axes are requested that the font style doesn't actually expose —
+  // a common silent misconfiguration. The `axes` attribute only whitelists which
+  // of the font's variable axes to show; it can't surface axes the font file
+  // doesn't contain (e.g. pointing a tester at a static style, or a wrong/mis-cased
+  // tag). Without this hint the sliders just fail to appear with no explanation.
+  const requestedAxesKey = (axes ?? []).filter(Boolean).join(',');
+  const availableAxesKey = (fontStyle.variableAxes ?? []).map(variableAxis => variableAxis === null || variableAxis === void 0 ? void 0 : variableAxis.axis).filter(notEmpty).join(',');
+  React.useEffect(() => {
+    if (!requestedAxesKey) return;
+    const available = new Set(availableAxesKey ? availableAxesKey.split(',') : []);
+    const missing = requestedAxesKey.split(',').filter(axis => !available.has(axis));
+    if (missing.length === 0) return;
+    const label = missing.length === 1 ? 'axis' : 'axes';
+    console.warn(`fontdue-type-tester: variable ${label} ${missing.map(axis => `"${axis}"`).join(', ')} ` + `requested via the "axes" attribute, but ` + (available.size === 0 ? `this font style exposes no variable axes (is it a variable font?). No axis sliders will be shown.` : `this font style only exposes ${[...available].map(axis => `"${axis}"`).join(', ')}. ` + `No slider will be shown for the missing ${label}.`));
+  }, [requestedAxesKey, availableAxesKey]);
   if (!variableSettings) return null;
   if (!axes) return null;
   const handleChange = (axis, value) => {

package/dist/components/elements/StoreModalUnifiedCheckout.js

@@ -63,7 +63,10 @@ import _StoreModalUnifiedCheckout_viewer from "../../__generated__/StoreModalUni
  */
 
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { ReCAPTCHA } from 'react-google-recaptcha';
+// The script-injecting reCAPTCHA wrapper (loads Google's api.js). Importing the
+// package's barebone named export instead was the FD-917 root cause; see
+// ../Recaptcha for the full explanation.
+import { ReCAPTCHA } from '../Recaptcha.js';
 import * as Sentry from '@sentry/react';
 import { commitMutation, graphql, useFragment, useRelayEnvironment } from 'react-relay';
 import AddressFields from '../Cart/AddressFields.js';
@@ -76,6 +79,7 @@ import { Check, X } from '../Icons/index.js';
 import ConfigContext from '../ConfigContext.js';
 import { Price } from '../Price/index.js';
 import { sendOrderTracking } from '../Cart/orderTracking.js';
+import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 
 /* const LICENSEE_REQUIRED_FIELDS = ['organization', 'country'] as (keyof Identity)[]; */
 
@@ -297,7 +301,11 @@ export default function StoreModalUnifiedCheckout(_ref2) {
   // reCAPTCHA state
   const [recaptchaToken, setRecaptchaToken] = useState(null);
   const [pendingCustomerSubmit, setPendingCustomerSubmit] = useState(null);
+  // Error shown inside the contact-information section (separate from the
+  // payment-section `error`, which isn't rendered until a customer exists).
+  const [customerError, setCustomerError] = useState(null);
   const recaptchaRef = useRef(null);
+  const recaptchaTimeout = useRecaptchaTimeout();
   const recaptchaEnabled = ((_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.recaptchaEnabled) ?? false;
   const recaptchaSiteKey = (_viewer$settings2 = viewer.settings) === null || _viewer$settings2 === void 0 ? void 0 : _viewer$settings2.recaptchaSiteKey;
   const onCompleted = (res, errors, onSuccess, onError) => {
@@ -417,7 +425,9 @@ export default function StoreModalUnifiedCheckout(_ref2) {
 
   // Submit customer data with optional reCAPTCHA token
   const submitCustomer = useCallback((token, callbacks) => {
+    recaptchaTimeout.clear();
     setPendingCustomerSubmit(null);
+    setCustomerError(null);
     if (!billingIdentity.name && !billingIdentity.email) {
       setBillingIdentity({
         ...billingIdentity,
@@ -444,7 +454,7 @@ export default function StoreModalUnifiedCheckout(_ref2) {
       (_recaptchaRef$current2 = recaptchaRef.current) === null || _recaptchaRef$current2 === void 0 ? void 0 : _recaptchaRef$current2.reset();
       setRecaptchaToken(null);
     });
-  }, [customer, billingIdentity, updateCustomer]);
+  }, [customer, billingIdentity, updateCustomer, recaptchaTimeout]);
   const handleRecaptchaChange = useCallback(token => {
     setRecaptchaToken(token);
     // If we were waiting for a token to submit, do it now
@@ -455,14 +465,43 @@ export default function StoreModalUnifiedCheckout(_ref2) {
   const handleRecaptchaExpired = useCallback(() => {
     setRecaptchaToken(null);
   }, []);
+
+  // Give up cleanly when the reCAPTCHA widget can't produce a token. Without
+  // this, a submit that's waiting on `execute()` would sit on “Submitting…”
+  // forever (the widget failing to load is a silent no-op). Reset the section
+  // and show an error so the buyer can retry.
+  const abortCustomerRecaptcha = useCallback(callbacks => {
+    var _recaptchaRef$current3;
+    recaptchaTimeout.clear();
+    setPendingCustomerSubmit(null);
+    setRecaptchaToken(null);
+    (_recaptchaRef$current3 = recaptchaRef.current) === null || _recaptchaRef$current3 === void 0 ? void 0 : _recaptchaRef$current3.reset();
+    setCustomerError(RECAPTCHA_UNAVAILABLE_MESSAGE);
+    callbacks.onError();
+  }, [recaptchaTimeout]);
+  const handleRecaptchaErrored = useCallback(() => {
+    // Widget loaded but errored during execution — recover the same way.
+    if (pendingCustomerSubmit) {
+      abortCustomerRecaptcha(pendingCustomerSubmit.callbacks);
+    }
+  }, [pendingCustomerSubmit, abortCustomerRecaptcha]);
   const handleCustomerSubmit = callbacks => {
     // If reCAPTCHA is enabled but no token, execute it and wait for callback
     if (recaptchaEnabled && recaptchaSiteKey && !recaptchaToken) {
-      var _recaptchaRef$current3;
+      var _recaptchaRef$current4;
+      setCustomerError(null);
       setPendingCustomerSubmit({
         callbacks
       });
-      (_recaptchaRef$current3 = recaptchaRef.current) === null || _recaptchaRef$current3 === void 0 ? void 0 : _recaptchaRef$current3.execute();
+      // Safety net: if no token arrives (e.g. Google's api.js never loaded),
+      // don't hang. When the timer fires we only give up if the reCAPTCHA
+      // script never loaded — if it did, the buyer may be mid-challenge, so we
+      // keep waiting for their `onChange` rather than cancelling on them.
+      recaptchaTimeout.start(() => {
+        if (isRecaptchaScriptLoaded()) return;
+        abortCustomerRecaptcha(callbacks);
+      });
+      (_recaptchaRef$current4 = recaptchaRef.current) === null || _recaptchaRef$current4 === void 0 ? void 0 : _recaptchaRef$current4.execute();
       return;
     }
     submitCustomer(recaptchaToken, callbacks);
@@ -661,12 +700,15 @@ export default function StoreModalUnifiedCheckout(_ref2) {
       onChange: handleCustomerChange,
       optInLabel: (_viewer$settings3 = viewer.settings) === null || _viewer$settings3 === void 0 ? void 0 : _viewer$settings3.newsletterOptInLabel,
       errors: customerErrorsObject
-    }), recaptchaEnabled && recaptchaSiteKey && /*#__PURE__*/React.createElement(ReCAPTCHA, {
+    }), customerError && /*#__PURE__*/React.createElement("div", {
+      className: "store-modal__cart__error"
+    }, customerError), recaptchaEnabled && recaptchaSiteKey && /*#__PURE__*/React.createElement(ReCAPTCHA, {
       ref: recaptchaRef,
       sitekey: recaptchaSiteKey,
       size: "invisible",
       onChange: handleRecaptchaChange,
-      onExpired: handleRecaptchaExpired
+      onExpired: handleRecaptchaExpired,
+      onErrored: handleRecaptchaErrored
     }))
   }), order.customer && !hasCountryMismatch ? /*#__PURE__*/React.createElement(StoreModalLicenseeIsBillingIdentityElement, {
     disabled: false,

package/dist/fontdue.css

@@ -3480,16 +3480,24 @@ textarea.text-field__input {
 
 .fontdue-admin-toolbar {
   position: fixed;
-  right: 16px;
-  bottom: 16px;
+  left: 50%;
+  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
+  transform: translateX(-50%);
   z-index: 2147483000;
-  font-family: inherit;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 13px;
   line-height: 1.45;
+  text-align: left;
   color: #fff;
-  --fdat-surface: #0a0a0a;
+  --fdat-surface: #101014;
   --fdat-border: rgba(255, 255, 255, 0.16);
   --fdat-muted: rgba(255, 255, 255, 0.5);
+  --fdat-accent: #5b5bd6;
+  --fdat-well: rgba(255, 255, 255, 0.05);
+  --fdat-well-on: rgba(91, 91, 214, 0.18);
 }
 .fontdue-admin-toolbar * {
   box-sizing: border-box;
@@ -3518,43 +3526,79 @@ textarea.text-field__input {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px;
+  padding: 8px 16px;
   font-size: 13px;
-  background: var(--fdat-surface);
+  background: #0a0a0a;
   color: #fff;
   border: 1px solid var(--fdat-border);
+  border-radius: 999px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
+  white-space: nowrap;
 }
 .fontdue-admin-toolbar__button:hover {
   border-color: rgba(255, 255, 255, 0.4);
 }
 .fontdue-admin-toolbar__button:focus-visible {
   outline: 1px solid #fff;
-  outline-offset: 1px;
+  outline-offset: 2px;
+}
+.fontdue-admin-toolbar[data-previewing=true] .fontdue-admin-toolbar__button {
+  background: var(--fdat-accent);
+  border-color: var(--fdat-accent);
+}
+.fontdue-admin-toolbar[data-previewing=true] .fontdue-admin-toolbar__button:hover {
+  border-color: #fff;
 }
 
-.fontdue-admin-toolbar__dot {
-  width: 6px;
-  height: 6px;
-  background: var(--fdat-muted);
+.fontdue-admin-toolbar__mark {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  display: grid;
+  place-items: center;
+  background: var(--fdat-accent);
+  color: #fff;
+  border-radius: 5px;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 10px;
+  line-height: 1;
 }
-.fontdue-admin-toolbar[data-previewing=true] .fontdue-admin-toolbar__dot {
+.fontdue-admin-toolbar[data-previewing=true] .fontdue-admin-toolbar__button .fontdue-admin-toolbar__mark {
   background: #fff;
+  color: var(--fdat-accent);
 }
 
 .fontdue-admin-toolbar__panel {
-  width: 248px;
-  margin-bottom: 8px;
-  padding: 14px;
+  width: 280px;
+  max-width: calc(100vw - 24px);
+  margin-bottom: 10px;
+  padding: 16px;
   background: var(--fdat-surface);
   border: 1px solid var(--fdat-border);
+  border-radius: 14px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
 }
 
 .fontdue-admin-toolbar__header {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
+  align-items: center;
   gap: 10px;
-  margin-bottom: 12px;
+  margin-bottom: 14px;
+}
+
+.fontdue-admin-toolbar__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12.5px;
+  font-weight: 700;
+}
+.fontdue-admin-toolbar__brand .fontdue-admin-toolbar__mark {
+  width: 19px;
+  height: 19px;
+  border-radius: 6px;
+  font-size: 11.5px;
 }
 
 .fontdue-admin-toolbar__title {
@@ -3569,16 +3613,93 @@ textarea.text-field__input {
 }
 
 .fontdue-admin-toolbar__toggle {
+  position: relative;
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
+  padding: 11px 12px;
+  background: var(--fdat-well);
+  border-radius: 10px;
   cursor: pointer;
 }
 .fontdue-admin-toolbar__toggle input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
   margin: 0;
-  accent-color: #fff;
+  opacity: 0;
   cursor: pointer;
 }
+.fontdue-admin-toolbar__toggle input:disabled {
+  cursor: default;
+}
+.fontdue-admin-toolbar[data-previewing=true] .fontdue-admin-toolbar__toggle {
+  background: var(--fdat-well-on);
+}
+.fontdue-admin-toolbar__toggle:has(input:focus-visible) {
+  outline: 1px solid #fff;
+  outline-offset: 2px;
+}
+
+.fontdue-admin-toolbar__toggle-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fontdue-admin-toolbar__toggle-text strong {
+  font-size: 12.5px;
+  font-weight: 700;
+}
+.fontdue-admin-toolbar__toggle-text span {
+  font-size: 10.5px;
+  color: var(--fdat-muted);
+}
+
+.fontdue-admin-toolbar__switch {
+  flex: none;
+  width: 36px;
+  height: 22px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.18);
+  position: relative;
+  transition: background 0.15s;
+}
+.fontdue-admin-toolbar__switch::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  transition: left 0.15s;
+}
+input:checked + .fontdue-admin-toolbar__switch {
+  background: var(--fdat-accent);
+}
+input:checked + .fontdue-admin-toolbar__switch::after {
+  left: 17px;
+}
+input:disabled + .fontdue-admin-toolbar__switch {
+  opacity: 0.55;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fontdue-admin-toolbar__switch {
+    transition: none;
+  }
+  .fontdue-admin-toolbar__switch::after {
+    transition: none;
+  }
+}
+
+.fontdue-admin-toolbar__status {
+  margin: 9px 0 0;
+  font-size: 11px;
+  color: #b3b3f2;
+}
 
 .fontdue-admin-toolbar__hint {
   margin: 10px 0 0;
@@ -3590,6 +3711,9 @@ textarea.text-field__input {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  padding: 11px 12px;
+  background: rgba(224, 162, 60, 0.12);
+  border-radius: 10px;
 }
 
 .fontdue-admin-toolbar__expired-text {
@@ -3597,8 +3721,8 @@ textarea.text-field__input {
   align-items: flex-start;
   gap: 8px;
   margin: 0;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.85);
+  font-size: 11.5px;
+  color: #e8c07a;
 }
 
 .fontdue-admin-toolbar__warning-icon {
@@ -3660,7 +3784,7 @@ textarea.text-field__input {
   gap: 8px;
   width: 100%;
   margin: 0;
-  padding: 7px 10px;
+  padding: 8px 11px;
   font: inherit;
   font-size: 12px;
   text-align: left;
@@ -3668,7 +3792,7 @@ textarea.text-field__input {
   color: #fff;
   background: transparent;
   border: 1px solid var(--fdat-border);
-  border-radius: 0;
+  border-radius: 10px;
   cursor: pointer;
 }
 .fontdue-admin-toolbar__action:hover {
@@ -3694,7 +3818,7 @@ textarea.text-field__input {
   padding-top: 10px;
   border-top: 1px solid var(--fdat-border);
   color: var(--fdat-muted);
-  font-size: 11px;
+  font-size: 10.5px;
   word-break: break-word;
 }
 
@@ -3702,7 +3826,7 @@ textarea.text-field__input {
   display: block;
   margin-top: 4px;
   color: rgba(255, 255, 255, 0.32);
-  font-size: 11px;
+  font-size: 10.5px;
 }
 
 :root {

package/dist/hooks/useRecaptchaTimeout.d.ts

@@ -0,0 +1,11 @@
+export declare const RECAPTCHA_TIMEOUT_MS = 15000;
+export declare const RECAPTCHA_UNAVAILABLE_MESSAGE = "We couldn\u2019t verify that you\u2019re human. Please refresh the page and try again.";
+export declare function isRecaptchaScriptLoaded(): boolean;
+export interface RecaptchaTimeout {
+    /** (Re)start the timer. Any previously scheduled callback is cancelled. */
+    start(onTimeout: () => void): void;
+    /** Cancel a pending timer (e.g. once a token arrives). Safe to call twice. */
+    clear(): void;
+}
+export declare function createRecaptchaTimeout(timeoutMs?: number): RecaptchaTimeout;
+export declare function useRecaptchaTimeout(timeoutMs?: number): RecaptchaTimeout;

package/dist/hooks/useRecaptchaTimeout.js

@@ -0,0 +1,60 @@
+import { useEffect, useRef } from 'react';
+
+// How long we wait for the invisible reCAPTCHA widget to hand back a token
+// after calling `execute()` before we give up. reCAPTCHA normally resolves in
+// a second or two; a genuine challenge is handled by the readiness probe below
+// (we don't cut a buyer off mid-challenge), so this only needs to be long
+// enough to rule out a transient slow load.
+export const RECAPTCHA_TIMEOUT_MS = 15000;
+
+// User-facing message shown when the reCAPTCHA widget never produced a token
+// (typically because Google's api.js failed to load). Curly apostrophes per
+// the Fontdue house style.
+export const RECAPTCHA_UNAVAILABLE_MESSAGE = 'We couldn’t verify that you’re human. Please refresh the page and try again.';
+
+// True once Google's reCAPTCHA script (`window.grecaptcha`) has loaded. We use
+// this to tell the two failure modes apart when the timeout fires:
+//   - script never loaded  → the widget is dead and would hang forever; reset.
+//   - script loaded, no token yet → the buyer may be mid-challenge; keep
+//     waiting rather than cancelling on them.
+export function isRecaptchaScriptLoaded() {
+  // Google's api.js defines `grecaptcha` on the global object; in a browser
+  // `globalThis === window`, so this reads the same property while staying
+  // safe under SSR and unit tests where `window` may be undefined.
+  return typeof globalThis !== 'undefined' && globalThis.grecaptcha != null;
+}
+// Framework-free timer wrapper. Kept as a plain factory (not a hook) so the
+// resilience contract can be unit-tested with fake timers without a DOM.
+export function createRecaptchaTimeout() {
+  let timeoutMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : RECAPTCHA_TIMEOUT_MS;
+  let handle = null;
+  const clear = () => {
+    if (handle !== null) {
+      clearTimeout(handle);
+      handle = null;
+    }
+  };
+  const start = onTimeout => {
+    clear();
+    handle = setTimeout(() => {
+      handle = null;
+      onTimeout();
+    }, timeoutMs);
+  };
+  return {
+    start,
+    clear
+  };
+}
+
+// React hook wrapper: one stable timer per component that auto-clears on
+// unmount (so a pending timeout never fires setState after teardown).
+export function useRecaptchaTimeout(timeoutMs) {
+  const ref = useRef(null);
+  if (ref.current === null) {
+    ref.current = createRecaptchaTimeout(timeoutMs);
+  }
+  const timeout = ref.current;
+  useEffect(() => () => timeout.clear(), [timeout]);
+  return timeout;
+}