fontdue-js 3.2.0 → 3.2.2

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 3.2.2
+
+- **Fixed the reCAPTCHA forms failing to server-render under Vite SSR** (Astro, and any framework whose dev SSR externalizes CJS deps through Node's ESM interop). 3.2.1 switched to `react-google-recaptcha`'s default export, which bundlers honouring the `__esModule` marker (webpack/Next, and Vite's browser optimizer) unwrap straight to the widget wrapper — but Node's strict ESM↔CJS interop models that same default import as the whole module *namespace*, so `<ReCAPTCHA>` was an object at SSR time. React threw "Element type is invalid … got: object" and the checkout, `NewsletterSignup` and `TestFontsForm` islands fell back to client rendering with a console error. The re-export now normalises the binding (`__esModule ? .default : obj`), resolving the wrapper on every path. A no-op for webpack and Vite's browser build. No public API change.
+
+## 3.2.1
+
+- **Fixed checkout, newsletter signup and trial-font downloads hanging forever on reCAPTCHA-enabled foundries.** `StoreModalUnifiedCheckout`, `NewsletterSignup` and `TestFontsForm` imported the *named* `ReCAPTCHA` export from `react-google-recaptcha` — the barebone widget, which never injects Google's `api.js` and expects you to supply `grecaptcha` yourself. So the invisible widget rendered an empty `<div>`, `window.grecaptcha` stayed undefined, `execute()` was a permanent silent no-op, and the submit button froze on "Submitting…" with no network request and no error. All three forms now use the package's default export (the `react-async-script` wrapper that actually loads the script). This has affected every release since 3.0.0. As defence in depth, each form also arms a 15-second timeout after calling `execute()`: if the reCAPTCHA script never loaded, the form resets and surfaces an inline error so the buyer can retry, while a challenge already in progress is never cancelled. No public API change — no new or changed props.
+- **Redesigned the admin preview toolbar** (`FontdueAdminToolbar`) — the collapsed control is now a bottom-centre pill carrying its state in the label (*Preview* / *Previewing hidden fonts* / *Preview expired*), and the panel leads with the *Hidden fonts* switch. The toolbar chrome no longer inherits the host page's font. If you style the toolbar yourself, note the new element class names (`__brand`, `__mark`, `__toggle-text`, `__switch`, `__status`) and that `__dot` is gone; `data-testid="preview-toggle"` is unchanged.
+- `TypeTester` standalone element: comma-separated `axes`, `features` and `features-selected` attributes are now trimmed, so `axes="wght, opsz"` behaves the same as `axes="wght,opsz"` and a trailing comma no longer creates an empty entry (`features="*"` is preserved). Requesting an axis the bound style doesn't expose now logs a console warning naming the axes it does expose, instead of silently rendering no sliders.
+- **Unlocking a password-protected collection no longer slows down the rest of the site for that visitor.** The unlock route enabled Next draft mode with its default site-wide bypass cookie (`Path=/`), so after one unlock *every* page the visitor touched skipped the full-route cache and the data cache and was server-rendered live — seconds per page on content-heavy pages. `NodePasswordForm` now sends the pathname it unlocked on, and the unlock route scopes the bypass cookie to it: only the unlocked collection's pages render dynamically for that visitor, and everything else keeps serving from the static cache. Unlocking several collections yields several path-scoped cookies that coexist. Admin preview is unchanged — its bypass stays site-wide, which is the point of previewing.
+
 ## 3.2.0
 
 - **Fixed password-protected collections crashing statically-rendered Next.js storefronts.** Locked slugs are excluded from `generateStaticParams`, so a visitor's first request for one triggers an on-demand static fill of the font page — and the unlock-cookie read during that fill crashed it with a 500 (digest `DYNAMIC_SERVER_USAGE`). A locked page's static fill now renders (and caches) the password form, and unlocking takes that visitor past the static cache instead — the same mechanism as admin preview:

package/dist/__tests__/nextAdapter.test.js

@@ -44,18 +44,31 @@ vi.mock('next/navigation', () => ({
 // Draft mode + the preview token cookie, controllable per test. Default: not
 // previewing, so __prepareFontdueRender takes the public (cached) path. Set
 // cookiesError to make cookies() throw (e.g. simulate Next's dynamic bailout
-// during a prerender pass).
+// during a prerender pass). The jar mirrors Next's mutable route-handler
+// cookie store: draftMode().enable() queues the site-wide bypass cookie in it
+// (exactly the attributes real enable() sets), cookies().set() with the same
+// name replaces the queued cookie, and cookies().get() sees pending
+// mutations — the semantics the unlock route's path-scoping relies on.
 const draft = vi.hoisted(() => ({
   enabled: false,
   token: undefined,
   nodeAccess: undefined,
-  cookiesError: undefined
+  cookiesError: undefined,
+  jar: new Map()
 }));
 vi.mock('next/headers', () => ({
   draftMode: async () => ({
     isEnabled: draft.enabled,
     enable: () => {
       draft.enabled = true;
+      draft.jar.set('__prerender_bypass', {
+        name: '__prerender_bypass',
+        value: 'test-preview-mode-id',
+        httpOnly: true,
+        sameSite: 'none',
+        secure: true,
+        path: '/'
+      });
     }
   }),
   cookies: async () => {
@@ -65,7 +78,10 @@ vi.mock('next/headers', () => ({
         value: draft.token
       } : name === 'fontdue_node_access' && draft.nodeAccess ? {
         value: draft.nodeAccess
-      } : undefined
+      } : draft.jar.get(name),
+      set: cookie => {
+        draft.jar.set(cookie.name, cookie);
+      }
     };
   }
 }));
@@ -82,6 +98,7 @@ beforeEach(() => {
   draft.token = undefined;
   draft.nodeAccess = undefined;
   draft.cookiesError = undefined;
+  draft.jar.clear();
 });
 function stubSingleTenant() {
   let url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'https://acme.fontdue.com';
@@ -457,6 +474,49 @@ describe('unlock route handler', () => {
     });
     expect(draft.enabled).toBe(true);
   });
+  it('scopes the bypass cookie to the posted path, replacing the site-wide one', async () => {
+    const {
+      POST
+    } = await importUnlock();
+    const response = await POST(unlockRequest(JSON.stringify({
+      token: 'na-tok',
+      path: '/fonts/recursive'
+    })));
+    expect(response.status).toBe(200);
+    expect(draft.enabled).toBe(true);
+    const bypass = draft.jar.get('__prerender_bypass');
+    expect(bypass === null || bypass === void 0 ? void 0 : bypass.path).toBe('/fonts/recursive');
+    // Replaced, not duplicated — and the value + protective attributes from
+    // enable() survive the re-set.
+    expect(bypass === null || bypass === void 0 ? void 0 : bypass.value).toBe('test-preview-mode-id');
+    expect(bypass === null || bypass === void 0 ? void 0 : bypass.httpOnly).toBe(true);
+    expect(bypass === null || bypass === void 0 ? void 0 : bypass.sameSite).toBe('none');
+    expect(bypass === null || bypass === void 0 ? void 0 : bypass.secure).toBe(true);
+  });
+  it('strips trailing slashes so the cookie still matches the page itself', async () => {
+    var _draft$jar$get;
+    const {
+      POST
+    } = await importUnlock();
+    await POST(unlockRequest(JSON.stringify({
+      token: 'na-tok',
+      path: '/fonts/recursive/'
+    })));
+    expect((_draft$jar$get = draft.jar.get('__prerender_bypass')) === null || _draft$jar$get === void 0 ? void 0 : _draft$jar$get.path).toBe('/fonts/recursive');
+  });
+  it.each([['missing', undefined], ['not a string', 42], ['relative', 'fonts/recursive'], ['attribute injection', '/fonts/x; SameSite=Lax'], ['not percent-encoded (space)', '/fonts/ x'], ['control characters', '/fonts/\u0000x'], ['root (nothing to narrow)', '/'], ['over-long', '/' + 'x'.repeat(600)]])('leaves the bypass site-wide when the path is %s', async (_label, path) => {
+    var _draft$jar$get2;
+    const {
+      POST
+    } = await importUnlock();
+    const response = await POST(unlockRequest(JSON.stringify({
+      token: 'na-tok',
+      path
+    })));
+    expect(response.status).toBe(200);
+    expect(draft.enabled).toBe(true);
+    expect((_draft$jar$get2 = draft.jar.get('__prerender_bypass')) === null || _draft$jar$get2 === void 0 ? void 0 : _draft$jar$get2.path).toBe('/');
+  });
   it('rejects a missing token without enabling the bypass', async () => {
     const {
       POST

package/dist/__tests__/recaptchaTimeout.test.js

@@ -0,0 +1,191 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { createRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_TIMEOUT_MS, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../hooks/useRecaptchaTimeout.js';
+
+// FD-917: on a reCAPTCHA-enabled tenant the checkout / newsletter / test-fonts
+// submit handlers call `recaptchaRef.current.execute()` and then wait for the
+// widget's `onChange` to hand back a token. If the invisible widget never loads
+// (Google's api.js is never injected — reproduced live on Big Fog Foundry),
+// `execute()` is a silent no-op, `onChange` never fires, and the button sits on
+// “Submitting…” forever with no error and no network request.
+//
+// The fix is a timeout guard (`createRecaptchaTimeout`) plus a readiness probe
+// (`isRecaptchaScriptLoaded`). These tests model the submit control flow to
+// pin the contract: a widget that never responds must not hang forever, and a
+// widget that DID load (buyer possibly mid-challenge) must not be cancelled.
+
+// Minimal model of a submit handler's reCAPTCHA-gated path, mirroring
+// handleCustomerSubmit + handleRecaptchaChange in StoreModalUnifiedCheckout.
+function makeSubmitHarness(_ref) {
+  let {
+    widgetEverLoads,
+    fireTokenAfterMs
+  } = _ref;
+  const timeout = createRecaptchaTimeout();
+  const state = {
+    submitting: false,
+    pending: false,
+    error: null,
+    submittedToken: undefined,
+    resets: 0
+  };
+  const onChange = token => {
+    if (token && state.pending) {
+      timeout.clear();
+      state.pending = false;
+      state.submitting = false;
+      state.submittedToken = token;
+    }
+  };
+  const abort = () => {
+    timeout.clear();
+    state.pending = false;
+    state.submitting = false;
+    state.resets += 1;
+    state.error = RECAPTCHA_UNAVAILABLE_MESSAGE;
+  };
+  const execute = () => {
+    if (widgetEverLoads) {
+      globalThis.grecaptcha = {
+        ready: true
+      };
+      if (fireTokenAfterMs != null) {
+        setTimeout(() => onChange('tok_ok'), fireTokenAfterMs);
+      }
+    }
+    // Dead widget: execute() is a no-op, onChange never fires.
+  };
+
+  // Mirrors the guarded submit branch: mark submitting/pending, arm the safety
+  // net, then execute.
+  const submit = () => {
+    state.submitting = true;
+    state.pending = true;
+    state.error = null;
+    timeout.start(() => {
+      if (isRecaptchaScriptLoaded()) return; // may be mid-challenge; keep waiting
+      abort();
+    });
+    execute();
+  };
+  return {
+    state,
+    submit
+  };
+}
+describe('reCAPTCHA resilience (FD-917)', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    delete globalThis.grecaptcha;
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+    delete globalThis.grecaptcha;
+  });
+  it('dead widget: resets and shows an error instead of hanging forever', () => {
+    const {
+      state,
+      submit
+    } = makeSubmitHarness({
+      widgetEverLoads: false
+    });
+    submit();
+    // Immediately after submit the button is stuck on “Submitting…”.
+    expect(state.submitting).toBe(true);
+    expect(state.pending).toBe(true);
+    expect(state.error).toBeNull();
+
+    // Advance well past any real challenge — the old code would still be stuck.
+    vi.advanceTimersByTime(RECAPTCHA_TIMEOUT_MS + 1000);
+    expect(state.submitting).toBe(false);
+    expect(state.pending).toBe(false);
+    expect(state.resets).toBe(1);
+    expect(state.error).toBe(RECAPTCHA_UNAVAILABLE_MESSAGE);
+  });
+  it('happy path: a token before the timeout submits and never triggers the guard', () => {
+    const {
+      state,
+      submit
+    } = makeSubmitHarness({
+      widgetEverLoads: true,
+      fireTokenAfterMs: 1500
+    });
+    submit();
+    vi.advanceTimersByTime(1500);
+    expect(state.submittedToken).toBe('tok_ok');
+    expect(state.submitting).toBe(false);
+    expect(state.pending).toBe(false);
+    expect(state.error).toBeNull();
+
+    // The timeout must not fire after a successful submit.
+    vi.advanceTimersByTime(RECAPTCHA_TIMEOUT_MS + 1000);
+    expect(state.resets).toBe(0);
+  });
+  it('slow challenge: a loaded widget is not cancelled while awaiting the buyer', () => {
+    // Widget loaded (grecaptcha defined) but the token takes longer than the
+    // timeout — e.g. the buyer is solving an image challenge. We must keep
+    // waiting rather than resetting under them.
+    const {
+      state,
+      submit
+    } = makeSubmitHarness({
+      widgetEverLoads: true,
+      fireTokenAfterMs: RECAPTCHA_TIMEOUT_MS + 5000
+    });
+    submit();
+    // Cross the timeout while the challenge is still open.
+    vi.advanceTimersByTime(RECAPTCHA_TIMEOUT_MS + 1000);
+    expect(state.resets).toBe(0);
+    expect(state.pending).toBe(true);
+
+    // The buyer finishes the challenge; the token still submits.
+    vi.advanceTimersByTime(4000);
+    expect(state.submittedToken).toBe('tok_ok');
+    expect(state.submitting).toBe(false);
+    expect(state.pending).toBe(false);
+  });
+});
+describe('createRecaptchaTimeout', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+  it('fires onTimeout after the delay', () => {
+    const timeout = createRecaptchaTimeout(1000);
+    const cb = vi.fn();
+    timeout.start(cb);
+    vi.advanceTimersByTime(999);
+    expect(cb).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(1);
+    expect(cb).toHaveBeenCalledTimes(1);
+  });
+  it('clear() cancels a pending timer', () => {
+    const timeout = createRecaptchaTimeout(1000);
+    const cb = vi.fn();
+    timeout.start(cb);
+    timeout.clear();
+    vi.advanceTimersByTime(5000);
+    expect(cb).not.toHaveBeenCalled();
+  });
+  it('start() replaces a previously scheduled timer', () => {
+    const timeout = createRecaptchaTimeout(1000);
+    const first = vi.fn();
+    const second = vi.fn();
+    timeout.start(first);
+    vi.advanceTimersByTime(500);
+    timeout.start(second);
+    vi.advanceTimersByTime(1000);
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+});
+describe('isRecaptchaScriptLoaded', () => {
+  afterEach(() => {
+    delete globalThis.grecaptcha;
+  });
+  it('is false when grecaptcha is absent', () => {
+    delete globalThis.grecaptcha;
+    expect(isRecaptchaScriptLoaded()).toBe(false);
+  });
+  it('is true once grecaptcha is present', () => {
+    globalThis.grecaptcha = {};
+    expect(isRecaptchaScriptLoaded()).toBe(true);
+  });
+});

package/dist/components/ConnectionErrorToolbar.js

@@ -48,9 +48,9 @@ function ConnectionErrorToolbar(_ref) {
     className: "fontdue-admin-toolbar__error-status-text"
   }, /*#__PURE__*/React.createElement(WarningIcon, null), "Fontdue couldn\u2019t be reached from this site."), /*#__PURE__*/React.createElement("p", {
     className: "fontdue-admin-toolbar__hint"
-  }, "This is most likely a cross-origin (CORS) setting \u2014 ", origin, " isn\u2019t on Fontdue\u2019s allowed list. Add it under Settings \u2192 Integration and this page will reload automatically."), /*#__PURE__*/React.createElement("p", {
+  }, "This is most likely a cross-origin (CORS) setting \u2013 ", origin, " isn\u2019t on Fontdue\u2019s allowed list. Add it under Settings \u2192 Integration and this page will reload automatically."), /*#__PURE__*/React.createElement("p", {
     className: "fontdue-admin-toolbar__hint"
-  }, "If it\u2019s already listed, the connection may be failing for another reason \u2014 a network problem or a temporary Fontdue outage."), fixUrl && /*#__PURE__*/React.createElement("a", {
+  }, "If it\u2019s already listed, the connection may be failing for another reason \u2013 a network problem or a temporary Fontdue outage."), fixUrl && /*#__PURE__*/React.createElement("a", {
     className: "fontdue-admin-toolbar__action",
     href: fixUrl,
     target: "_blank",

package/dist/components/FontdueAdminToolbar/index.js

@@ -139,7 +139,7 @@ export default function FontdueAdminToolbar() {
           if (isSessionExpiredError(errors)) {
             setPreviewMarkerCookie(false);
             setPreviewState('off');
-            setError('Your session expired — sign in again.');
+            setError('Your session expired, please sign in again.');
           } else {
             setError('Could not start preview.');
           }
@@ -204,8 +204,8 @@ export default function FontdueAdminToolbar() {
   }, /*#__PURE__*/React.createElement("div", {
     className: "fontdue-admin-toolbar__header"
   }, /*#__PURE__*/React.createElement("span", {
-    className: "fontdue-admin-toolbar__title"
-  }, "Fontdue"), /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-admin-toolbar__brand"
+  }, /*#__PURE__*/React.createElement(FontdueMark, null), "Preview"), /*#__PURE__*/React.createElement("span", {
     className: "fontdue-admin-toolbar__user"
   }, adminName)), expired ? /*#__PURE__*/React.createElement("div", {
     className: "fontdue-admin-toolbar__expired",
@@ -221,15 +221,20 @@ export default function FontdueAdminToolbar() {
     "data-testid": "reenter-preview-button"
   }, "Re-enter preview")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
     className: "fontdue-admin-toolbar__toggle"
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-admin-toolbar__toggle-text"
+  }, /*#__PURE__*/React.createElement("strong", null, "Hidden fonts"), /*#__PURE__*/React.createElement("span", null, "Show unpublished families, only to you")), /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     checked: previewing,
     disabled: busy,
     onChange: e => e.target.checked ? enterPreview() : exitPreview(),
     "data-testid": "preview-toggle"
-  }), /*#__PURE__*/React.createElement("span", null, "Preview hidden fonts")), /*#__PURE__*/React.createElement("p", {
-    className: "fontdue-admin-toolbar__hint"
-  }, previewing ? 'Unpublished fonts are visible across the site — only to you.' : 'Reveal unpublished fonts everywhere, only for you.')), (revalidateEndpoint || adminUrl) && /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-admin-toolbar__switch",
+    "aria-hidden": "true"
+  })), previewing && /*#__PURE__*/React.createElement("p", {
+    className: "fontdue-admin-toolbar__status"
+  }, "Visible across the whole site until you switch it off or the preview expires.")), (revalidateEndpoint || adminUrl) && /*#__PURE__*/React.createElement("div", {
     className: "fontdue-admin-toolbar__actions"
   }, revalidateEndpoint && /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -249,7 +254,7 @@ export default function FontdueAdminToolbar() {
     className: "fontdue-admin-toolbar__error"
   }, error), /*#__PURE__*/React.createElement("p", {
     className: "fontdue-admin-toolbar__meta"
-  }, fontdueHost ? `Shown because you’re signed in to Fontdue at ${fontdueHost}.` : 'Shown because you’re signed in to Fontdue.', /*#__PURE__*/React.createElement("span", {
+  }, fontdueHost ? `Shown only to you – you’re signed in to Fontdue at ${fontdueHost}.` : 'Shown only to you – you’re signed in to Fontdue.', /*#__PURE__*/React.createElement("span", {
     className: "fontdue-admin-toolbar__version"
   }, "fontdue-js ", version))), /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -257,10 +262,17 @@ export default function FontdueAdminToolbar() {
     onClick: () => setOpen(v => !v),
     "aria-expanded": open,
     "data-testid": "fontdue-admin-toolbar-button"
-  }, expired ? /*#__PURE__*/React.createElement(WarningIcon, null) : /*#__PURE__*/React.createElement("span", {
-    className: "fontdue-admin-toolbar__dot",
+  }, expired ? /*#__PURE__*/React.createElement(WarningIcon, null) : /*#__PURE__*/React.createElement(FontdueMark, null), expired ? 'Preview expired' : previewing ? 'Previewing hidden fonts' : 'Preview'));
+}
+
+// The Fontdue mark: a serif F on an iris square. Brands the pill and the panel
+// header so the control can name its function ("Preview") instead of the
+// vendor; the full attribution lives in the panel footer.
+function FontdueMark() {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-admin-toolbar__mark",
     "aria-hidden": "true"
-  }), "Fontdue", previewing ? ' · previewing' : '', expired ? ' · preview expired' : ''));
+  }, "F");
 }
 
 // Small inline warning glyph (a triangle with an exclamation). Inherits the

package/dist/components/NewsletterSignup/index.js

@@ -5,13 +5,17 @@ import _NewsletterSignupQuery from "../../__generated__/NewsletterSignupQuery.gr
 import _NewsletterSignupUpdateCustomerMutation from "../../__generated__/NewsletterSignupUpdateCustomerMutation.graphql.js";
 import React, { useState, useRef, useCallback } from 'react';
 import { graphql, commitMutation, 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 Check from '../Icons/Check.js';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
 import NewsletterSignupQueryNode from '../../__generated__/NewsletterSignupQuery.graphql.js';
 import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 const updateCustomerMutation = (_NewsletterSignupUpdateCustomerMutation.hash && _NewsletterSignupUpdateCustomerMutation.hash !== "769087891b6f263122bbb630b3f2ca6c" && console.error("The definition of 'NewsletterSignupUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupUpdateCustomerMutation);
 export async function loadNewsletterSignupQuery(options) {
   return loadSerializableQuery(NewsletterSignupQueryNode, {}, options);
@@ -37,10 +41,12 @@ function NewsletterSignupComponent(_ref) {
   const [recaptchaToken, setRecaptchaToken] = useState(null);
   const [pendingSubmit, setPendingSubmit] = useState(false);
   const recaptchaRef = useRef(null);
+  const recaptchaTimeout = useRecaptchaTimeout();
   const environment = useRelayEnvironment();
   const recaptchaEnabled = ((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$settings = _data$viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.recaptchaEnabled) ?? false;
   const recaptchaSiteKey = (_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$setting = _data$viewer2.settings) === null || _data$viewer2$setting === void 0 ? void 0 : _data$viewer2$setting.recaptchaSiteKey;
   const submitForm = useCallback(token => {
+    recaptchaTimeout.clear();
     setSubmitting(true);
     setPendingSubmit(false);
     setError(null);
@@ -80,7 +86,7 @@ function NewsletterSignupComponent(_ref) {
         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
@@ -91,15 +97,36 @@ function NewsletterSignupComponent(_ref) {
   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 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);
@@ -167,7 +194,8 @@ function NewsletterSignupComponent(_ref) {
     sitekey: recaptchaSiteKey,
     size: "invisible",
     onChange: handleRecaptchaChange,
-    onExpired: handleRecaptchaExpired
+    onExpired: handleRecaptchaExpired,
+    onErrored: handleRecaptchaErrored
   }), /*#__PURE__*/React.createElement("div", {
     className: "newsletter-signup__section"
   }, /*#__PURE__*/React.createElement("button", {

package/dist/components/NodePasswordForm/index.js

@@ -29,9 +29,13 @@ export default function NodePasswordForm(props) {
 // Tell the storefront's unlock route (fontdue-js/next/unlock) about a
 // successful unlock so it can enable Next's draft-mode bypass — without it, a
 // statically-cached font page would keep serving this visitor the password
-// form after they unlocked (the full-route cache is visitor-blind). Always
-// resolves: the reload must happen even if the endpoint is absent or errors,
-// because on per-request-rendered frameworks the cookie alone unlocks.
+// form after they unlocked (the full-route cache is visitor-blind). The
+// current pathname rides along so the route can scope the bypass cookie to
+// the page being unlocked instead of the whole site — otherwise every page
+// this visitor touches would render dynamically (and slowly) for the rest of
+// their session. Always resolves: the reload must happen even if the endpoint
+// is absent or errors, because on per-request-rendered frameworks the cookie
+// alone unlocks.
 async function notifyUnlockEndpoint(endpoint, token) {
   if (!endpoint || !token) return;
   try {
@@ -41,7 +45,8 @@ async function notifyUnlockEndpoint(endpoint, token) {
         'content-type': 'application/json'
       },
       body: JSON.stringify({
-        token
+        token,
+        path: window.location.pathname
       })
     });
   } catch {

package/dist/components/Recaptcha.d.ts

@@ -0,0 +1,3 @@
+import { ReCAPTCHA as ReCAPTCHAClass } from 'react-google-recaptcha';
+export declare const ReCAPTCHA: typeof ReCAPTCHAClass;
+export type ReCAPTCHA = ReCAPTCHAClass;

package/dist/components/Recaptcha.js

@@ -0,0 +1,38 @@
+// Correct re-export of react-google-recaptcha (FD-917).
+//
+// The package exposes two very different things:
+//   - the DEFAULT export is the script-injecting wrapper (built with
+//     react-async-script): it loads Google's `api.js`, populates
+//     `window.grecaptcha`, then renders the widget. This is what you almost
+//     always want.
+//   - the NAMED `ReCAPTCHA` export is the *barebone* widget. It never loads the
+//     script; it expects you to supply the `grecaptcha` object yourself. On its
+//     own it renders an empty <div> and `execute()` is a permanent no-op.
+//
+// Every fontdue-js form imported the named (barebone) export, so on
+// reCAPTCHA-enabled tenants the invisible widget silently never loaded — the
+// checkout button hung on "Submitting…" forever with no token, no request, no
+// error. This module re-exports the wrapper under the same name so callers get
+// the working component.
+//
+// Interop caveat — why we normalise the default binding instead of re-exporting
+// it directly: react-google-recaptcha is CJS. Bundlers that honour the
+// `__esModule` marker (webpack/Next, and Vite's *browser* optimizer, which
+// `fontdue-js/vite` pre-bundles this package through) unwrap `import Default
+// from 'react-google-recaptcha'` straight to the wrapper. But Node's strict
+// ESM↔CJS interop — which Vite *dev SSR* uses for this externalized dep — models
+// the same default import as the whole module *namespace*
+// (`{ __esModule, default, ReCAPTCHA }`), not the wrapper. Re-exporting that
+// object made `<ReCAPTCHA>` an object at SSR time, so React threw "Element type
+// is invalid … got: object" and the reCAPTCHA form islands failed to
+// server-render (they fell back to client rendering with a console error).
+// Applying the standard `obj.__esModule ? obj.default : obj` normalisation here
+// resolves the wrapper on every path — webpack, Vite browser, and Node/Vite SSR.
+// react-async-script forwards refs to the inner widget, so `.execute()` /
+// `.reset()` / `.getValue()` still work through a ref typed as the class.
+import ReCAPTCHADefault from 'react-google-recaptcha';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const mod = ReCAPTCHADefault;
+const Wrapper = mod && mod.__esModule && mod.default ? mod.default : mod;
+export const ReCAPTCHA = Wrapper;