fontdue-js 3.5.1 → 3.7.0

package/dist/fontdue.css

@@ -89,6 +89,33 @@
   font-size: var(--cart_icon_size, 26px);
 }
 
+.customer-sign-in__errors {
+  color: var(--error_color);
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+.customer-sign-in__intro {
+  margin-bottom: 30px;
+}
+.customer-sign-in__section {
+  margin-bottom: 30px;
+}
+.customer-sign-in__actions {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  flex-wrap: wrap;
+}
+.customer-sign-in__back {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 .icon {
   display: inline-flex;
   justify-content: center;
@@ -860,6 +887,9 @@ fontdue-type-tester {
   position: relative;
   z-index: 0;
 }
+.type-tester__text__container[data-truncated] {
+  overflow: hidden;
+}
 .type-tester__text__container [data-contents=true] {
   column-count: var(--type-tester--column-count, auto);
   column-width: var(--type-tester--column-width, auto);
@@ -2008,6 +2038,39 @@ input:checked + .checkbox__icon {
   font-size: 20px;
 }
 
+.store-modal__index__load-more {
+  grid-column: 1/-1;
+  padding-bottom: 20px;
+  text-align: center;
+}
+
+.store-modal__index__load-more__button {
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: inherit;
+  text-align: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  text-transform: inherit;
+}
+.store-modal__index__load-more__button:active, .store-modal__index__load-more__button:focus {
+  outline: none;
+}
+.store-modal__index__load-more__button:not(:disabled) {
+  cursor: pointer;
+}
+.store-modal__index__load-more__button {
+  color: var(--secondary_text_color);
+  text-decoration: underline;
+}
+.store-modal__index__load-more__button:disabled {
+  text-decoration: none;
+}
+
 .store-modal__page__body:has(> .store-modal__index-item__button) {
   display: grid;
   grid-template-columns: auto 1fr auto;

package/dist/hooks/useAutofit.d.ts

@@ -8,6 +8,7 @@ export interface UseAutofitProps {
     fontWeight?: React.CSSProperties['fontWeight'];
     fontStyle?: string;
     fontVariationSettings?: string;
+    fontFeatureSettings?: string;
     enabled?: boolean;
     padding?: number;
 }
@@ -16,5 +17,5 @@ export interface UseAutofitResult {
     fontSize: number;
     ready: boolean;
 }
-declare const useAutofit: ({ text, fontFamily, fontSize: externalFontSize, min, max, letterSpacing, fontWeight, fontStyle, fontVariationSettings, enabled, padding, }: UseAutofitProps) => UseAutofitResult;
+declare const useAutofit: ({ text, fontFamily, fontSize: externalFontSize, min, max, letterSpacing, fontWeight, fontStyle, fontVariationSettings, fontFeatureSettings, enabled, padding, }: UseAutofitProps) => UseAutofitResult;
 export default useAutofit;

package/dist/hooks/useAutofit.js

@@ -9,7 +9,8 @@ function getCanvasContext() {
   return sharedCanvas.getContext('2d');
 }
 
-// DOM measurement (fallback for variable fonts)
+// DOM measurement (fallback for variable fonts and OpenType features, which
+// canvas can't express: `ctx.font` takes neither variation nor feature settings)
 let measureEl = null;
 function getMeasureElement() {
   if (!measureEl) {
@@ -31,7 +32,7 @@ function measureWithCanvas(text, fontFamily, fontWeight, fontStyleValue, letterS
   ctx.letterSpacing = '0px';
   return width;
 }
-function measureWithDOM(text, fontFamily, fontWeight, fontStyleValue, letterSpacing, fontVariationSettings) {
+function measureWithDOM(text, fontFamily, fontWeight, fontStyleValue, letterSpacing, fontVariationSettings, fontFeatureSettings) {
   const el = getMeasureElement();
   el.style.fontFamily = fontFamily;
   el.style.fontWeight = `${fontWeight}`;
@@ -39,6 +40,7 @@ function measureWithDOM(text, fontFamily, fontWeight, fontStyleValue, letterSpac
   el.style.fontSize = `${REF_SIZE}px`;
   el.style.letterSpacing = `${letterSpacing}em`;
   el.style.fontVariationSettings = fontVariationSettings;
+  el.style.fontFeatureSettings = fontFeatureSettings;
   el.textContent = text;
   return el.getBoundingClientRect().width;
 }
@@ -53,6 +55,7 @@ const useAutofit = _ref => {
     fontWeight = 400,
     fontStyle = 'normal',
     fontVariationSettings,
+    fontFeatureSettings,
     enabled = true,
     padding = 0
   } = _ref;
@@ -83,7 +86,10 @@ const useAutofit = _ref => {
     // Split by newlines and measure the widest line, since the rendered
     // text preserves line breaks (Draft.js uses white-space: pre-wrap).
     const lines = text.split('\n');
-    const measure = fontVariationSettings ? line => measureWithDOM(line, fontFamily, fontWeight, fontStyle, letterSpacing, fontVariationSettings) : line => measureWithCanvas(line, fontFamily, fontWeight, fontStyle, letterSpacing);
+    // Enabled features can change glyph widths (stylistic sets, small caps,
+    // ligatures), so the text has to be measured with them applied. The
+    // measure element is shared, so both settings are written on every call.
+    const measure = fontVariationSettings || fontFeatureSettings ? line => measureWithDOM(line, fontFamily, fontWeight, fontStyle, letterSpacing, fontVariationSettings || 'normal', fontFeatureSettings || 'normal') : line => measureWithCanvas(line, fontFamily, fontWeight, fontStyle, letterSpacing);
     const refWidth = Math.max(...lines.map(measure));
     if (refWidth <= 0) return;
 
@@ -92,7 +98,7 @@ const useAutofit = _ref => {
     const newSize = Math.min(Math.max(min, Math.floor(availableWidth / (refWidth / REF_SIZE))), max);
     setFontSize(newSize);
     if (!measured) setMeasured(true);
-  }, [text, fontFamily, fontWeight, fontStyle, fontVariationSettings, letterSpacing, containerWidth, enabled, min, max, padding, fontVersion]);
+  }, [text, fontFamily, fontWeight, fontStyle, fontVariationSettings, fontFeatureSettings, letterSpacing, containerWidth, enabled, min, max, padding, fontVersion]);
   if (!enabled) return {
     ref,
     fontSize: externalFontSize,

package/dist/hooks/useCurrentCustomer.d.ts

@@ -0,0 +1,34 @@
+import { useCurrentCustomerQuery$data } from '../__generated__/useCurrentCustomerQuery.graphql.js';
+export type CurrentCustomer = NonNullable<NonNullable<useCurrentCustomerQuery$data['viewer']>['currentCustomer']>;
+export interface UseCurrentCustomer {
+    /** The signed-in customer, or `null` when signed out or still loading. */
+    customer: CurrentCustomer | null;
+    /** True while the customer is being fetched. Always false when signed out. */
+    loading: boolean;
+    /** Forgets the session in this browser. Every Fontdue component sees it. */
+    signOut: () => void;
+}
+/**
+ * Who is signed in, if anyone.
+ *
+ * ```tsx
+ * const { customer, loading, signOut } = useCurrentCustomer();
+ *
+ * if (loading) return null;
+ * if (!customer) return <CustomerSignIn />;
+ * return <button onClick={signOut}>Sign out, {customer.name}</button>;
+ * ```
+ *
+ * Deliberately does not suspend, so it can be called from a component that
+ * renders on the server: it reports "signed out, not loading" during SSR and on
+ * the first client render, then fetches. That also means it needs no Suspense
+ * boundary, unlike the components that use `useLazyLoadQuery`.
+ *
+ * The signed-in state comes from the token store, which is one module-level
+ * singleton for the whole page — so a sign-in in one Astro island updates a
+ * `useCurrentCustomer()` in another, and `signOut()` signs out everywhere.
+ *
+ * Requires a `<FontdueProvider>` (or `<FontdueContextProvider>`) ancestor for
+ * the Relay environment.
+ */
+export default function useCurrentCustomer(): UseCurrentCustomer;

package/dist/hooks/useCurrentCustomer.js

@@ -0,0 +1,93 @@
+'use client';
+
+import _useCurrentCustomerQuery from "../__generated__/useCurrentCustomerQuery.graphql.js";
+import { useCallback, useEffect, useState } from 'react';
+import { fetchQuery, graphql, useRelayEnvironment } from 'react-relay';
+import { clearTokens, getTokens, subscribeToTokens } from '../auth/tokenStore.js';
+import { useFontdueUrl } from '../components/UrlContext.js';
+const query = (_useCurrentCustomerQuery.hash && _useCurrentCustomerQuery.hash !== "bbd9b896d31a326af6b8525fdd4464c0" && console.error("The definition of 'useCurrentCustomerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useCurrentCustomerQuery);
+/**
+ * Who is signed in, if anyone.
+ *
+ * ```tsx
+ * const { customer, loading, signOut } = useCurrentCustomer();
+ *
+ * if (loading) return null;
+ * if (!customer) return <CustomerSignIn />;
+ * return <button onClick={signOut}>Sign out, {customer.name}</button>;
+ * ```
+ *
+ * Deliberately does not suspend, so it can be called from a component that
+ * renders on the server: it reports "signed out, not loading" during SSR and on
+ * the first client render, then fetches. That also means it needs no Suspense
+ * boundary, unlike the components that use `useLazyLoadQuery`.
+ *
+ * The signed-in state comes from the token store, which is one module-level
+ * singleton for the whole page — so a sign-in in one Astro island updates a
+ * `useCurrentCustomer()` in another, and `signOut()` signs out everywhere.
+ *
+ * Requires a `<FontdueProvider>` (or `<FontdueContextProvider>`) ancestor for
+ * the Relay environment.
+ */
+export default function useCurrentCustomer() {
+  const environment = useRelayEnvironment();
+  const url = useFontdueUrl();
+  const [signedIn, setSignedIn] = useState(false);
+  const [customer, setCustomer] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  // Read the store in an effect rather than during render: reading it during
+  // render would have the first client render disagree with the server HTML for
+  // a signed-in visitor, which React reports as a hydration mismatch.
+  useEffect(() => {
+    const read = () => setSignedIn(getTokens(url) != null);
+    read();
+    return subscribeToTokens(read);
+  }, [url]);
+  useEffect(() => {
+    if (!signedIn) {
+      setCustomer(null);
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+
+    // network-only: the point of this query is who is signed in *now*, and a
+    // store hit would answer with the previous customer after a sign-out and
+    // back in.
+    const subscription = fetchQuery(environment, query, {}, {
+      fetchPolicy: 'network-only'
+    }).subscribe({
+      next: data => {
+        var _data$viewer;
+        if (!cancelled) setCustomer(((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.currentCustomer) ?? null);
+      },
+      complete: () => {
+        if (!cancelled) setLoading(false);
+      },
+      error: () => {
+        // The network layer has already dealt with an expired or invalid
+        // token — renewed it, or cleared the session, which re-runs this
+        // effect. Anything left is a failed request, and reporting "signed
+        // out" for it is better than a spinner that never stops.
+        if (!cancelled) {
+          setCustomer(null);
+          setLoading(false);
+        }
+      }
+    });
+    return () => {
+      cancelled = true;
+      subscription.unsubscribe();
+    };
+  }, [signedIn, environment]);
+  const signOut = useCallback(() => {
+    clearTokens(url);
+  }, [url]);
+  return {
+    customer,
+    loading,
+    signOut
+  };
+}

package/dist/reducer.d.ts

@@ -1,10 +1,10 @@
-import { CollectionStyleSkusMap } from './components/Root/productState.js';
+import { SkuStyleIds } from './components/Root/productState.js';
 import { Reducer } from 'redux';
 import { productState_Query$data } from './__generated__/productState_Query.graphql.js';
 import type { RouteConfig } from './components/StoreModal/routes.js';
-import { collectionSkuIdsDifferences, isSelected } from './utils.js';
+import { isSelected } from './selection.js';
 import { Config } from './components/ConfigContext.js';
-export { collectionSkuIdsDifferences, isSelected };
+export { isSelected };
 interface LicenseOptionSpec {
     licenseId: string;
     licenseOptions: {
@@ -22,8 +22,9 @@ export interface FontdueState {
     selectedSkuIds: {
         [skuId: string]: boolean;
     };
+    requestedSkuIds: string[];
     licenseOptions: LicenseOptionSpec[];
-    collectionStyleSkus: CollectionStyleSkusMap;
+    skuStyleIds: SkuStyleIds;
     collectionSkus: {
         [collectionSkuId: string]: string | null;
     };
@@ -94,7 +95,6 @@ export type FontdueAction = {
     type: 'UPDATE_LICENSEE_IS_BILLING_IDENTITY';
     value: boolean;
 };
-export declare const collectionSkuIdWithDiscount: (state: FontdueState, skuId: string) => [string, number] | [null, null];
 declare const reducer: Reducer<FontdueState, FontdueAction>;
 export declare function createDefaultStore(config: Config | undefined): import("redux").Store<FontdueState, FontdueAction, unknown>;
 export default reducer;

package/dist/reducer.js

@@ -1,9 +1,9 @@
 import { populateProductStateReducer } from './components/Root/productState.js';
 import { createStore } from 'redux';
 import { shallowEqual } from 'react-redux';
-import { collectionSkuIdsDifferences, collTransitivelyContainsSkuId, isSelected } from './utils.js';
+import { isSelected, repriceSelection, selectSku } from './selection.js';
 import { makeConfig } from './components/ConfigContext.js';
-export { collectionSkuIdsDifferences, isSelected };
+export { isSelected };
 const unselectLicense = (state, action) => {
   if (!(action.type === 'PRECART_UNSELECT_LICENSE' || action.type === 'PRECART_TOGGLE_LICENSE')) return state;
   return {
@@ -61,96 +61,17 @@ const selectLicenseOption = (state, action) => {
     })
   };
 };
-export const collectionSkuIdWithDiscount = (state, skuId) => {
-  const differences = collectionSkuIdsDifferences(state, skuId);
-  const collectionId = Object.keys(differences).filter(collSkuId => differences[collSkuId] <= state.skuPrices[skuId]).reduce((smallest, key) => {
-    if (!smallest || differences[key] < differences[smallest]) return key;
-    if (differences[key] === differences[smallest]) {
-      // When differences are equal, prefer a collection that is not the
-      // SKU being selected — this ensures collection bundles are preferred
-      // over selecting the family itself at the same price
-      if (smallest === skuId && key !== skuId) return key;
-      // Among non-self candidates, prefer the one covering more unique
-      // font styles — this ensures the most comprehensive collection wins
-      if (smallest !== skuId && key !== skuId) {
-        var _state$collectionStyl, _state$collectionStyl2;
-        const smallestStyles = new Set((_state$collectionStyl = state.collectionStyleSkus[smallest]) === null || _state$collectionStyl === void 0 ? void 0 : _state$collectionStyl.fontStyleSkuIds).size;
-        const keyStyles = new Set((_state$collectionStyl2 = state.collectionStyleSkus[key]) === null || _state$collectionStyl2 === void 0 ? void 0 : _state$collectionStyl2.fontStyleSkuIds).size;
-        if (keyStyles > smallestStyles) return key;
-      }
-    }
-    return smallest;
-  }, null);
-  if (collectionId) return [collectionId, differences[collectionId]];
-  return [null, null];
-};
-const selectedCollectionSkuIdContainingSkuId = (state, skuId) => Object.keys(state.selectedSkuIds).filter(id => state.selectedSkuIds[id] === true).find(selectedSkuId => collTransitivelyContainsSkuId(state.collectionStyleSkus, selectedSkuId, skuId));
-const setKeysFalse = (acc, key) => {
-  acc[key] = false;
-  return acc;
-};
-const unselectedMembersSkuIds = (state, action) => {
-  if (action.type !== 'SELECT_SKU_ID') throw new Error('Wrong action ${action.type}');
-  const {
-    skuId,
-    selected
-  } = action;
-  if (!selected) return {}; // only do this in case we are selecting something
-
-  // Recursively collect all descendant SKU IDs so that transitive
-  // selections (e.g., collection bundle → family → bundle) are all
-  // marked as false
-  const result = {};
-  const collectMembers = collSkuId => {
-    const members = state.collectionStyleSkus[collSkuId];
-    if (!members) return;
-    for (const id of members.fontStyleSkuIds) {
-      result[id] = false;
-    }
-    for (const id of members.childrenSkuIds) {
-      result[id] = false;
-      collectMembers(id);
-    }
-  };
-  collectMembers(skuId);
-  return result;
-};
 const selectSkuId = (state, action) => {
   if (action.type !== 'SELECT_SKU_ID') return state;
-  const {
-    skuId,
-    selected
-  } = action;
-  let actualSkuId = skuId;
-  if (selected) {
-    // check if selecting any collections instead of this sku
-    // would reduce the selection price
-    const [collectionSkuId, _amount] = collectionSkuIdWithDiscount(state, skuId);
-    actualSkuId = collectionSkuId || actualSkuId;
-  } else if (state.selectedSkuIds[skuId] === false) {
-    // we're clicking "deselect" on an item that's not actually selected,
-    // it's a member of a collection which is selected. in this case
-    // we'll find the collection and deselect that collection instead
-    const parentId = selectedCollectionSkuIdContainingSkuId(state, skuId);
-    if (parentId) actualSkuId = parentId;
-  }
   return {
-    ...state,
-    precartOpen: true,
-    selectedSkuIds: {
-      ...state.selectedSkuIds,
-      [actualSkuId]: selected,
-      ...unselectedMembersSkuIds(state, {
-        ...action,
-        skuId: actualSkuId,
-        selected
-      })
-    }
+    ...selectSku(state, action.skuId, action.selected),
+    precartOpen: true
   };
 };
 const unselectSkus = state => ({
   ...state,
-  selectedSkuIds: {}
+  selectedSkuIds: {},
+  requestedSkuIds: []
 });
 const storeModalNavigate = (state, action) => {
   if (action.type !== 'STORE_MODAL_NAVIGATE') return state;
@@ -197,7 +118,7 @@ const reducer = (state, action) => {
   if (!state) throw 'Reducer called without state';
   switch (action.type) {
     case 'POPULATE_PRODUCT_STATE':
-      return populateProductStateReducer(state, action);
+      return repriceSelection(populateProductStateReducer(state, action));
     case 'PRECART_TOGGLE_LICENSE':
       return toggleLicense(state, action);
     case 'PRECART_UNSELECT_LICENSE':
@@ -260,10 +181,11 @@ export function createDefaultStore(config) {
   return createStore(reducer, {
     selectedSkuIds: {},
     // { [skuId]: Boolean }
+    requestedSkuIds: [],
     licenseOptions: [],
     cartOpen: false,
     precartOpen: false,
-    collectionStyleSkus: {},
+    skuStyleIds: {},
     skuPrices: {},
     collectionSkus: {},
     fetchedCollectionIds: [],

package/dist/relay/environment.js

@@ -4,6 +4,8 @@ import { resolveFontdueServerConfig } from './serverConfig.js';
 import { PREVIEW_HEADER, hasPreviewMarkerCookie } from '../preview/constants.js';
 import { NODE_ACCESS_HEADER } from '../nodeAccess.js';
 import { CLIENT_VERSION_HEADER, version } from '../version.js';
+import { applyCustomerAuthHeader, customerAuthErrorCode, refreshCustomerSession } from '../auth/session.js';
+import { clearTokens } from '../auth/tokenStore.js';
 
 // Re-exported so UI (the admin toolbar) can surface the package version
 // without re-reading the build-time global in a 'use client' module.
@@ -174,65 +176,104 @@ export function createNetworkFetch(options) {
         tags: ['graphql', ...((serverConfig === null || serverConfig === void 0 ? void 0 : serverConfig.cacheTags) ?? []), `operation:${request.name}`]
       };
     }
-    for (let attempt = 0; attempt <= 2; attempt++) {
-      try {
-        const resp = await fetch(url + `?queryName=${request.name}`, init);
 
-        // A non-2xx response is a failed request, never data. Returning its
-        // body used to let a 5xx that happened to parse as JSON (Cloudflare
-        // answers an `Accept: application/json` client with one) reach Relay
-        // as a payload — and, on the server, get serialized into a prerendered
-        // page that then crashed every visitor on hydration.
-        if (!resp.ok) {
-          if (attempt < 2 && isRetryableStatus(resp.status)) {
+    // The request itself, retries and all. Named so the customer-session
+    // logic below can re-run it after renewing an expired access token.
+    async function send() {
+      for (let attempt = 0; attempt <= 2; attempt++) {
+        try {
+          const resp = await fetch(url + `?queryName=${request.name}`, init);
+
+          // A non-2xx response is a failed request, never data. Returning its
+          // body used to let a 5xx that happened to parse as JSON (Cloudflare
+          // answers an `Accept: application/json` client with one) reach Relay
+          // as a payload — and, on the server, get serialized into a prerendered
+          // page that then crashed every visitor on hydration.
+          if (!resp.ok) {
+            if (attempt < 2 && isRetryableStatus(resp.status)) {
+              await new Promise(resolve => setTimeout(resolve, RETRY_DELAY_MS));
+              continue;
+            }
+            const detail = await errorMessageOf(resp);
+            throw new FontdueResponseError(`fontdue-js: ${request.name} failed with HTTP ${resp.status}` + (detail ? `: ${detail}` : ''), resp.status, request.name);
+          }
+          const json = await resp.json();
+          if (!isGraphQLResponse(json)) {
+            throw new FontdueResponseError(`fontdue-js: ${request.name} returned HTTP ${resp.status} with a body that is not a GraphQL response`, resp.status, request.name);
+          }
+
+          // GraphQL returns exceptions (for example, a missing required variable) in the "errors"
+          // property of the response. If any exceptions occurred when processing the request,
+          // throw an error to indicate to the developer what went wrong.
+          const {
+            errors
+          } = json;
+          if (Array.isArray(errors) && errors[0]) {
+            var _error$extensions;
+            const error = errors[0];
+            console.error('GraphQL Error:', {
+              message: error.message,
+              code: (_error$extensions = error.extensions) === null || _error$extensions === void 0 ? void 0 : _error$extensions.code,
+              path: error.path
+            });
+          }
+          return json;
+        } catch (error) {
+          if (error instanceof FontdueResponseError) throw error;
+          // Retry on network errors (TypeError) before falling through to CORS detection
+          if (attempt < 2 && error instanceof TypeError) {
             await new Promise(resolve => setTimeout(resolve, RETRY_DELAY_MS));
             continue;
           }
-          const detail = await errorMessageOf(resp);
-          throw new FontdueResponseError(`fontdue-js: ${request.name} failed with HTTP ${resp.status}` + (detail ? `: ${detail}` : ''), resp.status, request.name);
-        }
-        const json = await resp.json();
-        if (!isGraphQLResponse(json)) {
-          throw new FontdueResponseError(`fontdue-js: ${request.name} returned HTTP ${resp.status} with a body that is not a GraphQL response`, resp.status, request.name);
+          if (handlePossibleCorsError(error, url)) {
+            return {
+              data: undefined,
+              errors: [{
+                message: 'Cross-origin request blocked'
+              }]
+            };
+          }
+          throw error;
         }
+      }
 
-        // GraphQL returns exceptions (for example, a missing required variable) in the "errors"
-        // property of the response. If any exceptions occurred when processing the request,
-        // throw an error to indicate to the developer what went wrong.
-        const {
-          errors
-        } = json;
-        if (Array.isArray(errors) && errors[0]) {
-          var _error$extensions;
-          const error = errors[0];
-          console.error('GraphQL Error:', {
-            message: error.message,
-            code: (_error$extensions = error.extensions) === null || _error$extensions === void 0 ? void 0 : _error$extensions.code,
-            path: error.path
-          });
+      // Unreachable — final iteration either returns or throws
+      throw new Error('Unexpected: exhausted retries');
+    }
+
+    // The signed-in customer's access token, in the browser only. Set *after*
+    // `previewing` is decided, so a customer session can never be mistaken for
+    // an admin preview, and only when nothing else has claimed the header —
+    // a forwarded preview token is the page author's credential and wins.
+    //
+    // `headers` is the same object `init.headers` holds, so renewing the token
+    // below and re-running the fetch sends the new one.
+    const authScope = IS_SERVER ? undefined : base;
+    const customerSession = !IS_SERVER && headers.Authorization == null && headers.authorization == null && applyCustomerAuthHeader(headers, authScope);
+    const json = await send();
+    if (!customerSession) return json;
+    switch (customerAuthErrorCode(json)) {
+      // The everyday case: 24 hours have passed since the last visit. Renew
+      // once and re-run the request, so the visitor never sees a signed-out
+      // page they have to sign back into.
+      case 'token:expired':
+        {
+          const renewed = await refreshCustomerSession(url, authScope, headers);
+          if (renewed == null) return json;
+          applyCustomerAuthHeader(headers, authScope);
+          return await send();
         }
+
+      // Not renewable, and not a request the customer can retry into: forged,
+      // tampered with, or naming a customer who no longer exists. Forget it so
+      // the UI shows a signed-out state rather than retrying every request.
+      case 'token:invalid':
+      case 'customer:required':
+        clearTokens(authScope);
+        return json;
+      default:
         return json;
-      } catch (error) {
-        if (error instanceof FontdueResponseError) throw error;
-        // Retry on network errors (TypeError) before falling through to CORS detection
-        if (attempt < 2 && error instanceof TypeError) {
-          await new Promise(resolve => setTimeout(resolve, RETRY_DELAY_MS));
-          continue;
-        }
-        if (handlePossibleCorsError(error, url)) {
-          return {
-            data: undefined,
-            errors: [{
-              message: 'Cross-origin request blocked'
-            }]
-          };
-        }
-        throw error;
-      }
     }
-
-    // Unreachable — final iteration either returns or throws
-    throw new Error('Unexpected: exhausted retries');
   };
 }
 export const networkFetch = createNetworkFetch();

package/dist/selection.d.ts

@@ -0,0 +1,40 @@
+import type { FontdueState } from './reducer.js';
+type Catalog = Pick<FontdueState, 'skuStyleIds' | 'skuPrices'>;
+/**
+ * The cheapest set of SKUs in which each of `picks` sits inside one SKU
+ * granting all of its styles, sorted. Picks whose styles or price aren't known
+ * are left out.
+ *
+ * @example
+ *   cheapestSkuIds(['sku:bold', 'sku:regular', 'sku:light'], catalog)
+ *   // => ['sku:light+regular+bold'] rather than a pair plus a single
+ */
+export declare const cheapestSkuIds: (picks: readonly string[], catalog: Catalog) => string[];
+/**
+ * Re-derives `selectedSkuIds` from the picks. A pick whose styles or price
+ * aren't known yet – selected from the host page before its product data
+ * arrived – is bought as it is until they are.
+ */
+export declare const repriceSelection: (state: FontdueState) => FontdueState;
+/**
+ * Adds a pick, or takes out every pick sharing a style with the clicked SKU.
+ *
+ * If what's left is still cheapest bought with a SKU granting the clicked one's
+ * styles anyway – it's part of a bundle that costs no more without it – the
+ * click would change nothing, so the picks inside the selected SKUs granting
+ * them go too, as deselecting a member of a selected bundle always has.
+ */
+export declare const selectSku: (state: FontdueState, skuId: string, selected: boolean) => FontdueState;
+/**
+ * Whether a SKU – or a style with no SKU of its own – is in the selection:
+ * selected itself, or every style it grants is granted by what is selected.
+ */
+export declare const isSelected: (skuIdOrStyleId: string | null) => (state: FontdueState) => boolean;
+/**
+ * What picking a SKU would add to the selection's price: the cheapest
+ * combination with it, less the current one. Never more than the SKU's own
+ * price, and less when it completes a cheaper bundle – the Store Modal's
+ * “+$X”. Null when the SKU's styles or price aren't known.
+ */
+export declare const additionalCost: (state: FontdueState, skuId: string) => number | null;
+export {};