fontdue-js 3.1.0 → 3.2.1

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/index.js

@@ -1,6 +1,7 @@
 // Server-side entrypoint for Next.js apps (the App Router / RSC adapter).
-// The config-time wrapper lives in 'fontdue-js/next/config' and the deploy
-// hook route handler in 'fontdue-js/next/revalidate'.
+// The config-time wrapper lives in 'fontdue-js/next/config', the deploy
+// hook route handler in 'fontdue-js/next/revalidate', and the
+// password-unlock route handler in 'fontdue-js/next/unlock'.
 
 // Single-tenant apps need NO per-render setup and nothing from this entrypoint:
 // mounting <FontdueProvider> registers the ambient resolver that configures

package/dist/next/tenant.js

@@ -163,13 +163,41 @@ export async function __prepareFontdueRender(props) {
 //
 // Reading cookies() opts the route into dynamic rendering, so call this only
 // when it's actually needed — after a public fetch comes back
-// password-protected — to keep non-protected font pages static/cacheable. The
-// catch mirrors readPreviewHeaders: re-throw Next's control-flow bailout so a
-// protected page renders dynamically instead of being prerendered cookie-blind
-// (which would serve the locked form to a visitor who has unlocked it).
+// password-protected — to keep non-protected font pages static/cacheable.
+//
+// The draft-mode gate is where the caching architecture for locked
+// collections lives, so spelling it out: locked slugs are excluded from
+// generateStaticParams, so a visitor's first request for one is an on-demand
+// STATIC fill of an SSG route. Merely CALLING cookies() there flags the
+// render as dynamic, and Next 15 cannot take a runtime fill dynamic the way a
+// build-time pass can — it 500s ("Page changed from static to dynamic at
+// runtime", or DYNAMIC_SERVER_USAGE; FD-773). Catching the throw doesn't
+// help: the render is already poisoned by the call. So the cookie must not be
+// read at all unless this render is a draft-mode one — draftMode().isEnabled
+// is static-safe (readPreviewHeaders below leans on the same property), false
+// during any static pass.
+//
+// Gating on draft mode is not just crash avoidance, it IS the design: with
+// the gate, a locked slug's static fill renders (and caches) the password
+// form — the correct public view. The full-route cache is visitor-blind, so
+// no cookie could ever change what it serves anyway; the only way a visitor
+// sees unlocked content is off the static cache entirely. That's what the
+// unlock route handler (see ./unlock) provides: on a successful unlock the
+// form POSTs there, draft mode's bypass cookie takes this visitor's requests
+// to dynamic renders, the gate opens, and the token folds in here. (Exactly
+// the admin-preview model, with the password standing in for the admin
+// session.)
+//
+// At build time (NEXT_PHASE=phase-production-build) the gate is skipped and
+// the cookies() read trips Next's dynamic bailout, which unstable_rethrow
+// propagates: a build-time render whose own fetch touches a locked collection
+// bails that route out to dynamic today, and baking a cookie-blind form into
+// such a page is a behavior change we don't need for this fix. Non-bailout
+// throws (no request scope at all) still fall through to "no token".
 export async function nodeAccessHeaders() {
   try {
     var _await$cookies$get;
+    if (!isBuildPhase() && !(await draftMode()).isEnabled) return {};
     const value = (_await$cookies$get = (await cookies()).get(NODE_ACCESS_COOKIE)) === null || _await$cookies$get === void 0 ? void 0 : _await$cookies$get.value;
     return value ? {
       [NODE_ACCESS_HEADER]: value
@@ -179,6 +207,9 @@ export async function nodeAccessHeaders() {
     return {};
   }
 }
+function isBuildPhase() {
+  return typeof process !== 'undefined' && process.env.NEXT_PHASE === 'phase-production-build';
+}
 
 // The admin preview token for this render, as Authorization headers, or
 // undefined when not previewing. Draft mode gates it: reading draftMode().

package/dist/next/unlock.d.ts

@@ -0,0 +1,3 @@
+/** Default path the templates mount the handler at. */
+export declare const UNLOCK_ENDPOINT = "/api/unlock";
+export declare function POST(request: Request): Promise<Response>;

package/dist/next/unlock.js

@@ -0,0 +1,112 @@
+// Route handler that lets a visitor who unlocked a password-protected
+// collection actually see it on a statically-served Next storefront.
+// Re-export it from app/api/unlock/route.ts:
+//
+//   export { POST } from 'fontdue-js/next/unlock';
+//
+// and pass the route's path to the form: <NodePasswordForm
+// unlockEndpoint="/api/unlock" …/>. On a successful unlock the form POSTs the
+// access token here before reloading.
+//
+// Why this exists (FD-773): font pages are SSG, and Next's full-route cache is
+// visitor-blind — once a locked collection's page is (correctly) cached as the
+// password form, no cookie the form sets can change what the cache serves.
+// Enabling Next draft mode sets the __prerender_bypass cookie, which is the
+// one sanctioned way to take a single visitor off the full-route cache: their
+// subsequent requests render dynamically, nodeAccessHeaders() (fontdue-js/next)
+// reads the node-access cookie, and the collection resolves. Everyone else
+// keeps getting the static pages. This mirrors the admin-preview route
+// (/api/preview in the templates), which layers the same draft-mode bypass on
+// the preview cookie contract — including its trust model: the token is opaque
+// here and validated by the Fontdue GraphQL server on every request, so a
+// 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 { 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 === '') {
+    return Response.json({
+      ok: false,
+      error: 'Missing access token'
+    }, {
+      status: 400
+    });
+  }
+  (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.1.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.1.0",
+  "version": "3.2.1",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
@@ -90,6 +90,7 @@
     "./next": "./dist/next/index.js",
     "./next/config": "./dist/next/config.js",
     "./next/revalidate": "./dist/next/revalidate.js",
+    "./next/unlock": "./dist/next/unlock.js",
     "./next/image-loader": "./dist/next/image-loader.js",
     "./fontdue.css": "./dist/fontdue.css",
     "./BuyButton": {

package/types/next-headers.d.ts

@@ -1,9 +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' {
-  export function draftMode(): Promise<{ isEnabled: boolean }>;
+  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;
   }>;
 }