fontdue-js 3.1.0 → 3.2.1

package/dist/components/NodePasswordForm/index.js

@@ -25,6 +25,34 @@ const accessNodeMutation = (_NodePasswordFormAccessNodeMutation.hash && _NodePas
 export default function NodePasswordForm(props) {
   return /*#__PURE__*/React.createElement(EnsureFontdueContext, null, /*#__PURE__*/React.createElement(NodePasswordFormFields, 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). 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 {
+    await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({
+        token,
+        path: window.location.pathname
+      })
+    });
+  } catch {
+    // Ignore: reload regardless, the cookie may still be enough.
+  }
+}
 function NodePasswordFormFields(props) {
   const [password, setPassword] = useState('');
   const [error, setError] = useState(null);
@@ -49,7 +77,7 @@ function NodePasswordFormFields(props) {
           // ride a proxied or cross-origin server fetch, so we forward this
           // token as a header instead (see fontdue-js nodeAccess).
           rememberNodeAccessToken(res.accessNode.token);
-          location.reload();
+          notifyUnlockEndpoint(props.unlockEndpoint, res.accessNode.token).then(() => location.reload());
         } else {
           setError('Incorrect password');
         }

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;