fontdue-js 3.1.0 → 3.2.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 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:
+  - New route handler `fontdue-js/next/unlock`. Mount it in your app (`export { POST } from "fontdue-js/next/unlock"` in `app/api/unlock/route.ts`): on a successful unlock it enables Next draft mode, whose bypass cookie makes that one visitor's renders dynamic, so the unlock cookie is read and the collection resolves. Everyone else keeps the static pages.
+  - New `unlockEndpoint` prop on `NodePasswordForm` — the form POSTs the access token there before reloading. Pass `unlockEndpoint="/api/unlock"` on statically-rendered Next storefronts; omit it on frameworks that render per request (Astro, React Router 7, TanStack Start), where the cookie alone unlocks.
+  - `nodeAccessHeaders()` (`fontdue-js/next`) now reads the unlock cookie only during draft-mode renders, so a locked page's static fill is never flagged dynamic. See [Password-protected collections](https://www.fontdue.com/docs/develop/password-protected-collections).
+
 ## 3.1.0
 
 - **New `FeatureTesters` component** (`fontdue-js/FeatureTesters`) — renders a collection's *feature tester* cards, each showcasing an OpenType feature by toggling it on and off and tinting exactly the characters the feature changes. Pass `collectionId` or `collectionSlug`; in a React Server Component the server entry preloads its own query, and in a client tree (`preloadedQuery` or inside a `<FontdueProvider>`) it hydrates or lazy-loads like the other collection components. Collection-level props override the per-card dashboard settings: `highlightColor`, `toggle` (`'button'` or `'hover'`), and `autofit`. Requires a Fontdue backend that exposes `FontCollection.featureTesters` and the `FeatureTester` node. See [Feature Testers](https://www.fontdue.com/docs/reference/feature-testers).

package/dist/__tests__/nextAdapter.test.js

@@ -44,22 +44,44 @@ 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,
-  cookiesError: undefined
+  nodeAccess: undefined,
+  cookiesError: undefined,
+  jar: new Map()
 }));
 vi.mock('next/headers', () => ({
   draftMode: async () => ({
-    isEnabled: draft.enabled
+    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 () => {
     if (draft.cookiesError) throw draft.cookiesError;
     return {
       get: name => name === 'fontdue_preview_token' && draft.token ? {
         value: draft.token
-      } : undefined
+      } : name === 'fontdue_node_access' && draft.nodeAccess ? {
+        value: draft.nodeAccess
+      } : draft.jar.get(name),
+      set: cookie => {
+        draft.jar.set(cookie.name, cookie);
+      }
     };
   }
 }));
@@ -74,7 +96,9 @@ beforeEach(() => {
   vi.restoreAllMocks();
   draft.enabled = false;
   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';
@@ -360,6 +384,156 @@ describe('single-tenant ambient resolver (no per-render call)', () => {
     expect(config === null || config === void 0 ? void 0 : (_config$headers5 = config.headers) === null || _config$headers5 === void 0 ? void 0 : _config$headers5.authorization).toBeUndefined();
   });
 });
+describe('nodeAccessHeaders', () => {
+  it('draft-mode bypass render: returns the forwarding header', async () => {
+    stubSingleTenant();
+    draft.enabled = true;
+    draft.nodeAccess = 'na-tok';
+    const {
+      nodeAccessHeaders
+    } = await importTenant();
+    expect(await nodeAccessHeaders()).toEqual({
+      'fontdue-node-access': 'na-tok'
+    });
+  });
+  it('draft-mode bypass render without the cookie: returns {}', async () => {
+    stubSingleTenant();
+    draft.enabled = true;
+    const {
+      nodeAccessHeaders
+    } = await importTenant();
+    expect(await nodeAccessHeaders()).toEqual({});
+  });
+
+  // Regression for FD-773: locked slugs are excluded from generateStaticParams,
+  // so a visitor's first request is an on-demand STATIC fill of the SSG route.
+  // Merely calling cookies() there flags the render as dynamic and Next 15
+  // 500s ("Page changed from static to dynamic at runtime") — catching the
+  // throw doesn't unpoison it. Off draft mode the hook must return "no token"
+  // WITHOUT touching cookies(), so the fill can prerender the password form.
+  // cookiesError guards the "without touching" half: any cookies() call would
+  // reject.
+  it('runtime static fill (no draft mode): no token, and cookies() is never called', async () => {
+    stubSingleTenant();
+    draft.cookiesError = Object.assign(new Error('Dynamic server usage'), {
+      digest: 'DYNAMIC_SERVER_USAGE'
+    });
+    const {
+      nodeAccessHeaders
+    } = await importTenant();
+    expect(await nodeAccessHeaders()).toEqual({});
+  });
+
+  // At build time the gate is skipped and the bailout keeps propagating: a
+  // static route whose own fetch touches a locked collection bails out to
+  // dynamic at build today, and the fix must not change build classification.
+  it('build-time prerender: still propagates the dynamic bailout', async () => {
+    stubSingleTenant();
+    vi.stubEnv('NEXT_PHASE', 'phase-production-build');
+    draft.cookiesError = Object.assign(new Error('Dynamic server usage'), {
+      digest: 'DYNAMIC_SERVER_USAGE'
+    });
+    const {
+      nodeAccessHeaders
+    } = await importTenant();
+    await expect(nodeAccessHeaders()).rejects.toBe(draft.cookiesError);
+  });
+  it('swallows a non-control-flow throw (no request scope)', async () => {
+    stubSingleTenant();
+    draft.enabled = true;
+    draft.cookiesError = new Error('no request scope');
+    const {
+      nodeAccessHeaders
+    } = await importTenant();
+    expect(await nodeAccessHeaders()).toEqual({});
+  });
+});
+describe('unlock route handler', () => {
+  async function importUnlock() {
+    return await import("../next/unlock.js");
+  }
+  function unlockRequest(body) {
+    return new Request('https://storefront.example/api/unlock', {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body
+    });
+  }
+  it('POST with a token enables the draft-mode bypass', async () => {
+    const {
+      POST
+    } = await importUnlock();
+    const response = await POST(unlockRequest(JSON.stringify({
+      token: 'na-tok'
+    })));
+    expect(response.status).toBe(200);
+    expect(await response.json()).toEqual({
+      ok: true
+    });
+    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
+    } = await importUnlock();
+    const response = await POST(unlockRequest(JSON.stringify({})));
+    expect(response.status).toBe(400);
+    expect(draft.enabled).toBe(false);
+  });
+  it('rejects a malformed body without enabling the bypass', async () => {
+    const {
+      POST
+    } = await importUnlock();
+    const response = await POST(unlockRequest('not json'));
+    expect(response.status).toBe(400);
+    expect(draft.enabled).toBe(false);
+  });
+});
 
 // withFontdue detects the route-tree shape from the working directory; give
 // it one with or without src/app/[domain].

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.d.ts

@@ -2,6 +2,17 @@ import React from 'react';
 export interface NodePasswordForm_props {
     collectionId?: string | null;
     collectionSlug?: string | null;
+    /**
+     * Path of the storefront's unlock route (see fontdue-js/next/unlock), e.g.
+     * "/api/unlock". On a successful unlock the form POSTs `{ token }` there
+     * before reloading. Required on statically-rendered Next storefronts: the
+     * route enables the draft-mode bypass that takes this visitor off the
+     * full-route cache, so the reload can actually render the unlocked
+     * collection instead of re-serving the cached password form. Omit on
+     * frameworks that render server responses per request (Astro, React Router,
+     * TanStack Start) — there the cookie alone is enough.
+     */
+    unlockEndpoint?: string | null;
 }
 /**
  * Password form for a collection you already know is locked. Render it when a