fontdue-js 3.12.0 → 3.13.0

package/dist/components/CustomerSignIn/CustomerSignInElement.js

@@ -0,0 +1,132 @@
+'use client';
+
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import _CustomerSignInElementQuery from "../../__generated__/CustomerSignInElementQuery.graphql.js";
+import React, { Suspense, useCallback, useState, useSyncExternalStore } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { graphql, useLazyLoadQuery } from 'react-relay';
+import CustomerSignIn from './index.js';
+import { clearTokens, getTokens, subscribeToTokens } from '../../auth/tokenStore.js';
+import { useFontdueUrl } from '../UrlContext.js';
+const query = (_CustomerSignInElementQuery.hash && _CustomerSignInElementQuery.hash !== "e7d4a8fb8d19581d6bc36f29090230af" && console.error("The definition of 'CustomerSignInElementQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerSignInElementQuery);
+
+/** Dispatched on `window` once the customer is signed in; `detail.customer`. */
+export const SIGNED_IN_EVENT = 'fontdue:customer-signed-in';
+/** Dispatched on `window` when the customer clicks the element's sign-out button. */
+export const SIGNED_OUT_EVENT = 'fontdue:customer-signed-out';
+/**
+ * `<fontdue-customer-sign-in>`: the script-tag wrapper around `CustomerSignIn`.
+ *
+ * A page has no React of its own to read `useCurrentCustomer()` with, so the
+ * element shows the signed-in state itself – who is signed in and a way out –
+ * and tells the page about both changes with window events, as `setConsent`
+ * does with `fontdue:consent`.
+ *
+ * Not in the npm package's `exports`: sign-in is script-tag only for now.
+ */
+export default function CustomerSignInElement(_ref) {
+  let {
+    signOutLabel = 'Sign out',
+    ...props
+  } = _ref;
+  const url = useFontdueUrl();
+  // The script tag never renders on a server, so reading the store during
+  // render can't cause a hydration mismatch – and it means a returning
+  // customer never sees the form flash before their session is read.
+  const accessToken = useSyncExternalStore(subscribeToTokens, () => {
+    var _getTokens;
+    return ((_getTokens = getTokens(url)) === null || _getTokens === void 0 ? void 0 : _getTokens.accessToken) ?? null;
+  }, () => null);
+  // The customer `verifyLoginCode` just returned, tied to the token it came
+  // with, so the signed-in state shows at once instead of after a lookup. Any
+  // other session – a page load, a sign-in in another element, a renewed
+  // token – is looked up.
+  const [justSignedIn, setJustSignedIn] = useState(null);
+  const handleSignedIn = useCallback(customer => {
+    if (customer) {
+      var _getTokens2;
+      setJustSignedIn({
+        accessToken: (_getTokens2 = getTokens(url)) === null || _getTokens2 === void 0 ? void 0 : _getTokens2.accessToken,
+        customer
+      });
+    }
+    window.dispatchEvent(new CustomEvent(SIGNED_IN_EVENT, {
+      detail: {
+        customer
+      }
+    }));
+  }, [url]);
+  const signOut = useCallback(() => {
+    clearTokens(url);
+    setJustSignedIn(null);
+    window.dispatchEvent(new CustomEvent(SIGNED_OUT_EVENT));
+  }, [url]);
+  const form = /*#__PURE__*/React.createElement(CustomerSignIn, _extends({}, props, {
+    onSignedIn: handleSignedIn
+  }));
+  if (accessToken == null) return form;
+  if (justSignedIn && justSignedIn.accessToken === accessToken) {
+    return /*#__PURE__*/React.createElement(SignedIn, {
+      customer: justSignedIn.customer,
+      signOut: signOut,
+      signOutLabel: signOutLabel
+    });
+  }
+
+  // A lookup that fails leaves the visitor able to sign in again rather than
+  // facing an empty element.
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallback: form,
+    resetKeys: [accessToken]
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(SignedInLookup, {
+    key: accessToken,
+    form: form,
+    signOut: signOut,
+    signOutLabel: signOutLabel
+  })));
+}
+function SignedInLookup(_ref2) {
+  var _data$viewer;
+  let {
+    form,
+    signOut,
+    signOutLabel
+  } = _ref2;
+  // network-only: who is signed in *now*, never a store hit left over from the
+  // previous customer.
+  const data = useLazyLoadQuery(query, {}, {
+    fetchPolicy: 'network-only'
+  });
+  const customer = (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.currentCustomer;
+
+  // A token the server no longer honours is cleared by the network layer,
+  // which re-renders the element signed out. A null here without that is a
+  // session that names nobody; offer the form.
+  if (!customer) return form;
+  return /*#__PURE__*/React.createElement(SignedIn, {
+    customer: customer,
+    signOut: signOut,
+    signOutLabel: signOutLabel
+  });
+}
+function SignedIn(_ref3) {
+  let {
+    customer,
+    signOut,
+    signOutLabel
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "customer-sign-in",
+    "data-step": "signed-in"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "customer-sign-in__intro"
+  }, "Signed in as ", customer.email ?? customer.name, "."), /*#__PURE__*/React.createElement("div", {
+    className: "customer-sign-in__actions"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "customer-sign-in__back",
+    type: "button",
+    onClick: signOut
+  }, signOutLabel)));
+}

package/dist/components/CustomerSignIn/index.js

@@ -54,9 +54,11 @@ function CustomerSignInFields(_ref) {
           email
         }
       },
-      onCompleted: res => {
+      onCompleted: (res, errors) => {
         var _res$requestLoginCode;
-        if ((_res$requestLoginCode = res.requestLoginCode) !== null && _res$requestLoginCode !== void 0 && _res$requestLoginCode.success) {
+        if (errors && errors.length > 0) {
+          setError(errors[0].message);
+        } else if ((_res$requestLoginCode = res.requestLoginCode) !== null && _res$requestLoginCode !== void 0 && _res$requestLoginCode.success) {
           setStep('code');
         } else {
           // The only unsuccessful answer is the rate limit, and it is about the

package/dist/components/Root/index.js

@@ -25,6 +25,8 @@ const customElementMap = {
   'fontdue-cookie-notification': /*#__PURE__*/lazy(() => retryImport(() => import('../CookieNotification/index.js'))),
   'fontdue-font-families': /*#__PURE__*/lazy(() => retryImport(() => import('../FontFamilies/index.js'))),
   'fontdue-customer-login-form': /*#__PURE__*/lazy(() => retryImport(() => import('../CustomerLoginForm/index.js'))),
+  // Script tag only: CustomerSignIn isn't in the npm package's `exports` yet.
+  'fontdue-customer-sign-in': /*#__PURE__*/lazy(() => retryImport(() => import('../CustomerSignIn/CustomerSignInElement.js'))),
   'fontdue-newsletter-signup': /*#__PURE__*/lazy(() => retryImport(() => import('../NewsletterSignup/NewsletterSignupElement.js'))),
   'fontdue-node-password-form': /*#__PURE__*/lazy(() => retryImport(() => import('../NodePasswordForm/NodePasswordFormElement.js'))),
   // @ts-ignore

package/dist/components/Root/productState.js

@@ -1,17 +1,15 @@
 import _productState_Query from "../../__generated__/productState_Query.graphql.js";
 import _productState_fontPack from "../../__generated__/productState_fontPack.graphql.js";
 import _productState_node from "../../__generated__/productState_node.graphql.js";
-import _productState_collectionBundle from "../../__generated__/productState_collectionBundle.graphql.js";
 import _productState_bundle from "../../__generated__/productState_bundle.graphql.js";
 import _productState_collection from "../../__generated__/productState_collection.graphql.js";
 import _productState_sku from "../../__generated__/productState_sku.graphql.js";
 import { fetchQuery, graphql } from 'react-relay';
 import { notEmpty } from '../../utils.js';
 _productState_sku.hash && _productState_sku.hash !== "2cee6ddddc85699f0c90e2607c0634ef" && console.error("The definition of 'productState_sku' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_sku;
-_productState_collection.hash && _productState_collection.hash !== "90e56933f956c6773c0958284de81884" && console.error("The definition of 'productState_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_collection;
+_productState_collection.hash && _productState_collection.hash !== "5ad23bbf68581f27e769ebb0cda70f8e" && console.error("The definition of 'productState_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_collection;
 _productState_bundle.hash && _productState_bundle.hash !== "fa38bbc9f2062a727da4f5062b362054" && console.error("The definition of 'productState_bundle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_bundle;
-_productState_collectionBundle.hash && _productState_collectionBundle.hash !== "6744aa8f57d14b0111a0c49f488d7b03" && console.error("The definition of 'productState_collectionBundle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_collectionBundle;
-_productState_node.hash && _productState_node.hash !== "a1e172db45ca550a254819d877497d12" && console.error("The definition of 'productState_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_node;
+_productState_node.hash && _productState_node.hash !== "aab1ef07e0192a0d22a4c300084d9d05" && console.error("The definition of 'productState_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_node;
 
 // A pack is one SKU that grants every style in `fontStyles`. Its collection
 // members (a family or a superfamily with its families) are fetched in the
@@ -41,37 +39,21 @@ const allSkus = function (collection) {
     var _collection$bundles;
     bundleSkus = (collection === null || collection === void 0 ? void 0 : (_collection$bundles = collection.bundles) === null || _collection$bundles === void 0 ? void 0 : _collection$bundles.flatMap(bundle => allSkus(bundle, includeCollections, includeFontStyles))) ?? [];
   }
-  let collectionBundleSkus = [];
-  if ('collectionBundles' in collection && collection.collectionBundles) {
-    collectionBundleSkus = collection.collectionBundles.flatMap(collBundle => allSkus(collBundle, includeCollections, includeFontStyles));
-  }
-
-  // For collection bundles, get SKUs from member collections
-  let memberCollectionSkus = [];
-  if ('memberCollections' in collection && collection.memberCollections) {
-    memberCollectionSkus = collection.memberCollections.flatMap(member => {
-      var _member$fontStyles;
-      return [includeCollections ? member.sku : null, ...(includeFontStyles ? ((_member$fontStyles = member.fontStyles) === null || _member$fontStyles === void 0 ? void 0 : _member$fontStyles.map(style => style.sku)) ?? [] : [])];
-    }).filter(notEmpty);
-  }
   let childrenSkus = [];
   if ('children' in collection) {
     var _collection$children;
     childrenSkus = ((_collection$children = collection.children) === null || _collection$children === void 0 ? void 0 : _collection$children.flatMap(child => allSkus(child, includeCollections, includeFontStyles))) ?? [];
   }
-  return [includeCollections ? collection === null || collection === void 0 ? void 0 : collection.sku : null, ...(includeFontStyles && 'fontStyles' in collection ? (collection === null || collection === void 0 ? void 0 : (_collection$fontStyle = collection.fontStyles) === null || _collection$fontStyle === void 0 ? void 0 : _collection$fontStyle.map(style => style.sku)) ?? [] : []), ...bundleSkus, ...collectionBundleSkus, ...memberCollectionSkus, ...childrenSkus].filter(notEmpty);
+  return [includeCollections ? collection === null || collection === void 0 ? void 0 : collection.sku : null, ...(includeFontStyles && 'fontStyles' in collection ? (collection === null || collection === void 0 ? void 0 : (_collection$fontStyle = collection.fontStyles) === null || _collection$fontStyle === void 0 ? void 0 : _collection$fontStyle.map(style => style.sku)) ?? [] : []), ...bundleSkus, ...childrenSkus].filter(notEmpty);
 };
 
 // The styles each SKU grants, by SKU id: a style's SKU grants that style, a
-// bundle its styles, a family its styles, a superfamily its families' styles
-// and a collection bundle its member collections' styles. This is all the
+// bundle its styles (a whole-family member expanded to the family's styles), a
+// family its styles and a superfamily its families' styles. This is all the
 // selection needs to price any combination of them (see selection.ts).
 
 const styleIdsOf = collection => {
   var _collection$fontStyle2, _collection$children2;
-  if ('memberCollections' in collection && collection.memberCollections) {
-    return collection.memberCollections.flatMap(member => member.fontStyles.map(s => s.id));
-  }
   const own = 'fontStyles' in collection ? ((_collection$fontStyle2 = collection.fontStyles) === null || _collection$fontStyle2 === void 0 ? void 0 : _collection$fontStyle2.map(s => s.id)) ?? [] : [];
   const children = 'children' in collection ? ((_collection$children2 = collection.children) === null || _collection$children2 === void 0 ? void 0 : _collection$children2.flatMap(child => {
     var _child$fontStyles;
@@ -83,8 +65,7 @@ const flattenSkuStyleIds = collection => {
   var _collection$sku;
   const result = {};
   const add = (skuId, styleIds) => {
-    // A collection that returns no styles of its own (a superfamily listed as
-    // a collection bundle member) says nothing about what it grants.
+    // A SKU that lists no styles says nothing about what it grants.
     if (skuId && styleIds.length > 0) result[skuId] = styleIds;
   };
   const addStyles = fontStyles => {
@@ -95,14 +76,7 @@ const flattenSkuStyleIds = collection => {
   };
   add((_collection$sku = collection.sku) === null || _collection$sku === void 0 ? void 0 : _collection$sku.id, styleIdsOf(collection));
   if ('fontStyles' in collection) addStyles(collection.fontStyles);
-  if ('memberCollections' in collection) {
-    for (const member of collection.memberCollections ?? []) {
-      var _member$sku;
-      add((_member$sku = member.sku) === null || _member$sku === void 0 ? void 0 : _member$sku.id, member.fontStyles.map(s => s.id));
-      addStyles(member.fontStyles);
-    }
-  }
-  const nested = [...('bundles' in collection ? collection.bundles ?? [] : []), ...('collectionBundles' in collection ? collection.collectionBundles ?? [] : []), ...('children' in collection ? collection.children ?? [] : [])];
+  const nested = [...('bundles' in collection ? collection.bundles ?? [] : []), ...('children' in collection ? collection.children ?? [] : [])];
   for (const child of nested) Object.assign(result, flattenSkuStyleIds(child));
   return result;
 };

package/dist/components/StoreModal/StoreModalFamily.js

@@ -40,18 +40,22 @@ export default function StoreModalFamily(_ref) {
     onSelect,
     title
   } = _ref;
-  const collection = useFragment((_StoreModalFamily_collection.hash && _StoreModalFamily_collection.hash !== "f136cd0050f0f75f561221fac75feb85" && console.error("The definition of 'StoreModalFamily_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamily_collection), collectionKey);
+  const collection = useFragment((_StoreModalFamily_collection.hash && _StoreModalFamily_collection.hash !== "9f2a8cd937ebe2c06f2bf771d38de985" && console.error("The definition of 'StoreModalFamily_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamily_collection), collectionKey);
   const fontStyles = useMemo(() => stylesGrouped(collection.fontStyles), [collection]);
-  if ((fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles.length) === 0 && collection.collectionType === 'superfamily' && !collection.sku) return null;
+  // An unlisted bundle gets no button, but its price still applies as an
+  // upgrade: the product state reads every bundle.
+  const listedBundles = (_collection$bundles = collection.bundles) === null || _collection$bundles === void 0 ? void 0 : _collection$bundles.filter(bundle => bundle.visibility !== 'UNLISTED');
+
+  // A superfamily sold only through its families has nothing of its own to
+  // show – unless one of its bundles, across its families, has a button.
+  if ((fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles.length) === 0 && collection.collectionType === 'superfamily' && !collection.sku && !(listedBundles !== null && listedBundles !== void 0 && listedBundles.length)) return null;
   return /*#__PURE__*/React.createElement(FamilyElement, null, {
     title,
     familyButton: /*#__PURE__*/React.createElement(FamilyButton, {
       collection: collection,
       onSelectSku: onSelect
     }),
-    // An unlisted bundle gets no button, but its price still applies as an
-    // upgrade: the product state reads every bundle.
-    bundles: collection === null || collection === void 0 ? void 0 : (_collection$bundles = collection.bundles) === null || _collection$bundles === void 0 ? void 0 : _collection$bundles.filter(bundle => bundle.visibility !== 'UNLISTED').map(bundle => /*#__PURE__*/React.createElement(StoreModalBundleButton, {
+    bundles: listedBundles === null || listedBundles === void 0 ? void 0 : listedBundles.map(bundle => /*#__PURE__*/React.createElement(StoreModalBundleButton, {
       key: bundle.id,
       bundle: bundle,
       onSelectSku: onSelect

package/dist/components/StripeProvider/index.js

@@ -1,11 +1,13 @@
 import _StripeProviderCreateCheckoutSessionMutation from "../../__generated__/StripeProviderCreateCheckoutSessionMutation.graphql.js";
 import _StripeProvider_viewer from "../../__generated__/StripeProvider_viewer.graphql.js";
-import React, { useCallback, useContext, useRef } from 'react';
+import React, { useCallback, useContext, useRef, useState } from 'react';
 import { commitMutation, graphql, useFragment, useRelayEnvironment } from 'react-relay';
 import { Elements, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import { parseCustomProperties } from '../../utils.js';
 import ConfigContext from '../ConfigContext.js';
+import StoreModalPageContainer from '../elements/StoreModalPageContainer/index.js';
+const CHECKOUT_ERROR = 'We couldn’t start the checkout – please try again';
 const StripeProvider = _ref => {
   var _data$currentOrder, _data$settings, _data$settings$uiFont, _data$settings$uiFont2, _data$settings$uiFont3, _data$settings2, _data$currentOrder2, _data$currentOrder2$s, _data$themeConfig;
   let {
@@ -26,6 +28,7 @@ const StripeProvider = _ref => {
   const {
     stripe: config
   } = useContext(ConfigContext);
+  const [checkoutError, setCheckoutError] = useState(null);
   let customFontSource;
   const woffSrc = (_data$settings = data.settings) === null || _data$settings === void 0 ? void 0 : (_data$settings$uiFont = _data$settings.uiFontStyle) === null || _data$settings$uiFont === void 0 ? void 0 : (_data$settings$uiFont2 = _data$settings$uiFont.webfontSources) === null || _data$settings$uiFont2 === void 0 ? void 0 : (_data$settings$uiFont3 = _data$settings$uiFont2.find(source => (source === null || source === void 0 ? void 0 : source.format) === 'woff2')) === null || _data$settings$uiFont3 === void 0 ? void 0 : _data$settings$uiFont3.url;
   let fontFamily = (_data$settings2 = data.settings) !== null && _data$settings2 !== void 0 && _data$settings2.uiFontStyle ? `${data.settings.uiFontStyle.cssFamily} ${data.settings.uiFontStyle.name}` : undefined;
@@ -50,16 +53,22 @@ const StripeProvider = _ref => {
       commitMutation(environment, {
         mutation: (_StripeProviderCreateCheckoutSessionMutation.hash && _StripeProviderCreateCheckoutSessionMutation.hash !== "2ca9a7fcfed1292117e3cd6d0d95cca6" && console.error("The definition of 'StripeProviderCreateCheckoutSessionMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StripeProviderCreateCheckoutSessionMutation),
         variables: {},
-        onCompleted: response => {
+        onCompleted: (response, errors) => {
           var _response$createOrder, _response$createOrder2, _response$createOrder3;
           const clientSecret = (_response$createOrder = response.createOrderCheckoutSession) === null || _response$createOrder === void 0 ? void 0 : (_response$createOrder2 = _response$createOrder.order) === null || _response$createOrder2 === void 0 ? void 0 : (_response$createOrder3 = _response$createOrder2.stripeCheckoutSession) === null || _response$createOrder3 === void 0 ? void 0 : _response$createOrder3.clientSecret;
           if (clientSecret) {
             resolve(clientSecret);
           } else {
+            var _errors$;
+            // Stripe refused the session (e.g. a total under its minimum
+            // charge): show its reason, which the embedded checkout would
+            // otherwise swallow into a generic error.
+            setCheckoutError((errors === null || errors === void 0 ? void 0 : (_errors$ = errors[0]) === null || _errors$ === void 0 ? void 0 : _errors$.message) ?? CHECKOUT_ERROR);
             reject("Didn't find client secret");
           }
         },
         onError: error => {
+          setCheckoutError(CHECKOUT_ERROR);
           reject(`Error creating checkout session: ${error.message}`);
         }
       });
@@ -147,6 +156,14 @@ const StripeProvider = _ref => {
     syncAddressCheckbox: 'none'
   };
   if (providerType === 'checkout') {
+    if (checkoutError) {
+      return /*#__PURE__*/React.createElement(StoreModalPageContainer, null, {
+        body: /*#__PURE__*/React.createElement("div", {
+          className: "store-modal__cart__error",
+          role: "alert"
+        }, checkoutError)
+      });
+    }
     return /*#__PURE__*/React.createElement(EmbeddedCheckoutProvider, {
       stripe: stripePromiseRef.current,
       options: {

package/dist/components/TypeTester/TypeTesterStyleSelect.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { compareVariableSettings, variableInstanceSettings } from '../../utils.js';
 import Select from '../Select/index.js';
+import usePrefetchWhenNear from './usePrefetchWhenNear.js';
 const VARIABLE_AXES = 'VARIABLE_AXES';
 const LOADING = '__loading__';
 const TypeTesterStyleSelect = _ref => {
@@ -19,6 +20,8 @@ const TypeTesterStyleSelect = _ref => {
     onSelectFamilyId,
     includeVariableAxesOption
   } = _ref;
+  const containerRef = useRef(null);
+  usePrefetchWhenNear(containerRef, onOpen);
   const handleSelectFontStyle = selection => {
     if (selection === VARIABLE_AXES) {
       onSelectVariableAxes();
@@ -90,7 +93,9 @@ const TypeTesterStyleSelect = _ref => {
     cb(e.target.value);
   };
   return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
     className: "type-tester-select",
+    onPointerEnter: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(),
     "data-loading": loading || undefined,
     "aria-busy": loading || undefined,
     style: {

package/dist/components/TypeTester/usePrefetchWhenNear.d.ts

@@ -0,0 +1,14 @@
+export declare const PREFETCH_ROOT_MARGIN = "300px";
+export declare const PREFETCH_IDLE_TIMEOUT = 2000;
+/**
+ * Calls `prefetch` once, at idle time, after the element first comes near the
+ * viewport. Native `<select>` menus snapshot their options when they open (in
+ * Safari the open menu never updates), so data a dropdown needs has to be
+ * there before the first click – fetching on mousedown is too late. Waiting
+ * for idle keeps the request off the initial render, and waiting for the
+ * viewport keeps a long page of testers from fetching for every one at once.
+ *
+ *     const ref = useRef<HTMLDivElement>(null);
+ *     usePrefetchWhenNear(ref, loadOptions);
+ */
+export default function usePrefetchWhenNear(ref: React.RefObject<Element | null>, prefetch: (() => void) | undefined): void;

package/dist/components/TypeTester/usePrefetchWhenNear.js

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from 'react';
+
+// How far outside the viewport a tester counts as "near".
+export const PREFETCH_ROOT_MARGIN = '300px';
+// Upper bound on waiting for the browser to go idle.
+export const PREFETCH_IDLE_TIMEOUT = 2000;
+function onIdle(cb) {
+  if (typeof window.requestIdleCallback === 'function') {
+    const id = window.requestIdleCallback(cb, {
+      timeout: PREFETCH_IDLE_TIMEOUT
+    });
+    return {
+      cancel: () => window.cancelIdleCallback(id)
+    };
+  }
+  // Safari has no requestIdleCallback.
+  const id = window.setTimeout(cb, 200);
+  return {
+    cancel: () => window.clearTimeout(id)
+  };
+}
+
+/**
+ * Calls `prefetch` once, at idle time, after the element first comes near the
+ * viewport. Native `<select>` menus snapshot their options when they open (in
+ * Safari the open menu never updates), so data a dropdown needs has to be
+ * there before the first click – fetching on mousedown is too late. Waiting
+ * for idle keeps the request off the initial render, and waiting for the
+ * viewport keeps a long page of testers from fetching for every one at once.
+ *
+ *     const ref = useRef<HTMLDivElement>(null);
+ *     usePrefetchWhenNear(ref, loadOptions);
+ */
+export default function usePrefetchWhenNear(ref, prefetch) {
+  const prefetchRef = useRef(prefetch);
+  prefetchRef.current = prefetch;
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    let idle = null;
+    const schedule = () => {
+      idle ??= onIdle(() => {
+        var _prefetchRef$current;
+        return (_prefetchRef$current = prefetchRef.current) === null || _prefetchRef$current === void 0 ? void 0 : _prefetchRef$current.call(prefetchRef);
+      });
+    };
+    if (typeof IntersectionObserver !== 'function') {
+      schedule();
+      return () => {
+        var _idle;
+        return (_idle = idle) === null || _idle === void 0 ? void 0 : _idle.cancel();
+      };
+    }
+    const observer = new IntersectionObserver(entries => {
+      if (entries.some(entry => entry.isIntersecting)) {
+        observer.disconnect();
+        schedule();
+      }
+    }, {
+      rootMargin: PREFETCH_ROOT_MARGIN
+    });
+    observer.observe(el);
+    return () => {
+      var _idle2;
+      observer.disconnect();
+      (_idle2 = idle) === null || _idle2 === void 0 ? void 0 : _idle2.cancel();
+    };
+  }, [ref]);
+}

package/dist/fontdue.css

@@ -2136,6 +2136,14 @@ input:checked + .checkbox__icon {
   font-size: 60px;
 }
 
+.store-modal__index-item__description:first-child {
+  grid-column: 1/-2;
+}
+
+.store-modal__index-item__buy {
+  grid-column: -2/-1;
+}
+
 .store-modal__index-item__name {
   font-size: 20px;
   line-height: 30px;
@@ -4007,6 +4015,7 @@ input:disabled + .fontdue-admin-toolbar__switch {
 
 fontdue-test-fonts-form,
 fontdue-newsletter-signup,
-fontdue-customer-login-form {
+fontdue-customer-login-form,
+fontdue-customer-sign-in {
   font-size: 1rem;
 }

package/dist/version.js

@@ -8,4 +8,4 @@
 // (Fontage.ClientVersions) to spot sites that need to upgrade before a
 // feature that depends on a newer client can work for them.
 export const CLIENT_VERSION_HEADER = 'fontdue-client-version';
-export const version = "3.12.0";
+export const version = "3.13.0";

package/package.json

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

package/dist/__generated__/productState_collectionBundle.graphql.d.ts

@@ -1,41 +0,0 @@
-/**
- * @generated SignedSource<<c1a8446af3677d58e3851338c54cf16e>>
- * @lightSyntaxTransform
- * @nogrep
- */
-import { ReaderFragment } from 'relay-runtime';
-import { FragmentRefs } from "relay-runtime";
-export type productState_collectionBundle$data = {
-    readonly id: string;
-    readonly memberCollections: ReadonlyArray<{
-        readonly fontStyles: ReadonlyArray<{
-            readonly id: string;
-            readonly sku: {
-                readonly id: string;
-                readonly price: {
-                    readonly amount: number;
-                };
-            } | null;
-        }>;
-        readonly id: string;
-        readonly sku: {
-            readonly id: string;
-            readonly price: {
-                readonly amount: number;
-            };
-        } | null;
-    }> | null;
-    readonly name: string;
-    readonly sku: {
-        readonly id: string;
-        readonly price: {
-            readonly amount: number;
-        };
-    } | null;
-};
-export type productState_collectionBundle$key = {
-    readonly " $data"?: productState_collectionBundle$data;
-    readonly " $fragmentSpreads": FragmentRefs<"productState_collectionBundle">;
-};
-declare const node: ReaderFragment;
-export default node;

package/dist/__generated__/productState_collectionBundle.graphql.js

@@ -1,81 +0,0 @@
-/**
- * @generated SignedSource<<c1a8446af3677d58e3851338c54cf16e>>
- * @lightSyntaxTransform
- * @nogrep
- */
-
-/* tslint:disable */
-/* eslint-disable */
-// @ts-nocheck
-
-const node = function () {
-  var v0 = {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "id",
-      "storageKey": null
-    },
-    v1 = {
-      "alias": null,
-      "args": null,
-      "concreteType": "Sku",
-      "kind": "LinkedField",
-      "name": "sku",
-      "plural": false,
-      "selections": [v0 /*: any*/, {
-        "alias": null,
-        "args": null,
-        "concreteType": "Money",
-        "kind": "LinkedField",
-        "name": "price",
-        "plural": false,
-        "selections": [{
-          "alias": null,
-          "args": null,
-          "kind": "ScalarField",
-          "name": "amount",
-          "storageKey": null
-        }],
-        "storageKey": null
-      }],
-      "storageKey": null
-    };
-  return {
-    "argumentDefinitions": [],
-    "kind": "Fragment",
-    "metadata": {
-      "mask": false
-    },
-    "name": "productState_collectionBundle",
-    "selections": [v0 /*: any*/, {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "name",
-      "storageKey": null
-    }, v1 /*: any*/, {
-      "alias": null,
-      "args": null,
-      "concreteType": "FontCollection",
-      "kind": "LinkedField",
-      "name": "memberCollections",
-      "plural": true,
-      "selections": [v0 /*: any*/, v1 /*: any*/, {
-        "alias": null,
-        "args": null,
-        "concreteType": "FontStyle",
-        "kind": "LinkedField",
-        "name": "fontStyles",
-        "plural": true,
-        "selections": [v0 /*: any*/, v1 /*: any*/],
-        "storageKey": null
-      }],
-      "storageKey": null
-    }],
-    "type": "CollectionBundle",
-    "abstractKey": null
-  };
-}();
-node.hash = "6744aa8f57d14b0111a0c49f488d7b03";
-export default node;