fontdue-js 3.2.0 → 3.2.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 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,25 @@
+// 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.
+//
+// nodenext models this CJS package's default import as the whole module
+// namespace (the @types package declares an ESM `export default` over a CJS
+// runtime), so the default binding isn't directly usable as a JSX component.
+// We cast it to the widget class type. react-async-script forwards refs to the
+// inner widget, so `.execute()` / `.reset()` / `.getValue()` still work through
+// a ref typed as the class.
+import ReCAPTCHAImpl from 'react-google-recaptcha';
+export const ReCAPTCHA = ReCAPTCHAImpl;

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;
+}

package/dist/next/unlock.js

@@ -22,16 +22,44 @@
 // forged POST reveals nothing and buys the caller only their own dynamic
 // renders, exactly like a forged preview POST.
 //
+// The bypass is scoped to the unlocked page's path, not the whole site.
+// draftMode().enable() sets the cookie with Path=/, which would take EVERY
+// page this visitor touches off the full-route cache — and because a render
+// carrying a node-access token also opts all of its GraphQL fetches out of the
+// shared data cache, one unlock made the visitor's whole browsing session
+// dynamically rendered and measurably slow (seconds per page on heavy pages).
+// Draft mode is decided per-request by whether the browser SENDS the bypass
+// cookie, and the browser decides that by cookie Path — so the form posts the
+// pathname it unlocked on and we narrow the cookie to it. Public pages stay on
+// the static cache; only the unlocked collection's pages render dynamically
+// for this visitor. Unlocking several collections yields several same-name
+// cookies with different paths, which browsers store and send independently.
+// (Admin preview keeps its site-wide Path=/ bypass — previewing the whole site
+// dynamically is the point there.)
+//
 // The bypass cookie is a session cookie, while the node-access cookie lasts ~30
 // days. A returning visitor whose bypass lapsed sees the static form again and
 // re-enters the password; re-unlocking re-enables the bypass. There is no
 // DELETE: draft mode is shared with admin preview, so an unlock exit must not
 // tear down an active preview — the bypass simply expires with the session.
 
-import { draftMode } from 'next/headers';
+import { cookies, draftMode } from 'next/headers';
 
 /** Default path the templates mount the handler at. */
 export const UNLOCK_ENDPOINT = '/api/unlock';
+
+// Next's draft-mode bypass cookie. The name is Next's stable, documented
+// public contract (the same one draftMode().enable() sets), but it isn't
+// exported from a public entry point, so it's spelled out here.
+const PRERENDER_BYPASS_COOKIE = '__prerender_bypass';
+
+// A client-sent pathname we are willing to put in a Set-Cookie Path attribute:
+// absolute, bounded, visible ASCII with no ';' — i.e. what
+// window.location.pathname (always percent-encoded) actually produces, and
+// nothing that could terminate or escape the attribute (Next serializes the
+// path verbatim). Anything else falls back to the site-wide default.
+const SCOPE_PATH_MAX_LENGTH = 512;
+const SCOPE_PATH_RE = /^\/[\x21-\x3a\x3c-\x7e]*$/;
 export async function POST(request) {
   const body = await request.json().catch(() => ({}));
   if (typeof body.token !== 'string' || body.token === '') {
@@ -43,7 +71,42 @@ export async function POST(request) {
     });
   }
   (await draftMode()).enable();
+  await scopeBypassCookie(scopePath(body.path));
   return Response.json({
     ok: true
   });
+}
+
+// The cookie Path to narrow the bypass to, or undefined to leave it site-wide
+// (path missing — an older form — or unusable). Trailing slashes are stripped
+// because cookie path-matching treats "/fonts/x" as covering both the page
+// itself and everything under it, while "/fonts/x/" would miss the page.
+function scopePath(path) {
+  if (typeof path !== 'string' || path.length > SCOPE_PATH_MAX_LENGTH || !SCOPE_PATH_RE.test(path)) {
+    return undefined;
+  }
+  const trimmed = path.replace(/\/+$/, '');
+  return trimmed === '' ? undefined : trimmed;
+}
+
+// Replace the pending site-wide bypass cookie enable() just queued with one
+// scoped to `path`. cookies() in a route handler exposes the same mutable
+// store enable() wrote to, and setting the same cookie name again replaces the
+// queued Set-Cookie rather than adding a second one — so exactly one bypass
+// cookie leaves this response, and no Path=/ variant that could clobber an
+// admin's site-wide preview bypass. The explicit attributes mirror enable()'s
+// as a fallback; the spread keeps whatever enable() actually set (bar the
+// path) if Next ever changes them.
+async function scopeBypassCookie(path) {
+  if (!path) return;
+  const jar = await cookies();
+  const bypass = jar.get(PRERENDER_BYPASS_COOKIE);
+  if (!(bypass !== null && bypass !== void 0 && bypass.value)) return;
+  jar.set({
+    httpOnly: true,
+    sameSite: process.env.NODE_ENV !== 'development' ? 'none' : 'lax',
+    secure: process.env.NODE_ENV !== 'development',
+    ...bypass,
+    path
+  });
 }

package/dist/relay/environment.js

@@ -8,7 +8,7 @@ import { NODE_ACCESS_HEADER } from '../nodeAccess.js';
 // (defineVersionPlugin in .babelrc.cjs) with the literal package.json#version.
 // Exported so UI (the admin toolbar) can surface it without re-reading the
 // build-time global in a 'use client' module.
-export const version = "3.2.0";
+export const version = "3.2.1";
 const IS_SERVER = typeof window === typeof undefined;
 
 // Opt server fetches into Next's data cache only in production; dev stays

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",

package/types/next-headers.d.ts

@@ -1,13 +1,33 @@
 // Minimal declaration so src/next/tenant.ts type-checks without `next`
 // installed (it's the host app's dependency; this package only ever runs the
 // import inside a Next.js server).
+//
+// The cookie shape mirrors Next's route-handler cookie store: get() also
+// carries the queued cookie's attributes (the store is ResponseCookies-backed,
+// so a cookie draftMode().enable() just set comes back with its path/flags),
+// and set() with an existing name replaces the queued Set-Cookie. The unlock
+// route (src/next/unlock.ts) relies on both to narrow the bypass cookie's
+// path.
 declare module 'next/headers' {
+  interface CookieAttributes {
+    path?: string;
+    httpOnly?: boolean;
+    secure?: boolean;
+    sameSite?: 'strict' | 'lax' | 'none';
+    expires?: Date | number;
+    maxAge?: number;
+    domain?: string;
+  }
+
   export function draftMode(): Promise<{
     isEnabled: boolean;
     enable(): void;
     disable(): void;
   }>;
   export function cookies(): Promise<{
-    get(name: string): { value: string } | undefined;
+    get(
+      name: string,
+    ): ({ name: string; value: string } & CookieAttributes) | undefined;
+    set(cookie: { name: string; value: string } & CookieAttributes): void;
   }>;
 }