fontdue-js 2.26.1 → 2.28.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 2.28.0
+
+- Checkout now captures the buyer's **analytics consent and ad attribution** on the order. When the cart or store-modal checkout opens, fontdue-js sends the consent-banner state, anonymous ID, Meta browser IDs (the `_fbp`/`_fbc` cookies), and the page URL to the server, where they're stored on the order. This lets Fontdue emit a server-side *purchase* conversion event (Facebook Conversions API, Google Ads) when the order completes — completion happens in a Stripe webhook, outside the browser — while respecting the buyer's cookie-consent choice: if consent was declined, no identifiers are sent and nothing is forwarded to ad platforms. The call is fire-and-forget and never affects checkout.
+
+## 2.27.0
+
+- The `TypeTester` `truncate` option now accepts a **number** to cap the sample paragraph at N lines (in addition to `false` = off and `true` = 1 line). Truncation is now ascender/descender-safe at any line-height — it reads the font's vertical metrics so accents and descenders are never clipped — and flows the clipped text into columns, so multi-column truncated specimens render correctly and side-by-side testers keep their toolbars aligned.
+- The `TypeTester` **family selector now lazy-loads its data**. The family list is fetched on first dropdown open (shared once per page) and per-family styles load on demand, instead of fetching the whole font library up front. This substantially speeds up the initial render of pages with type testers, especially with several standalone testers. The dropdown shows a “Loading…” state while data loads.
+
 ## 2.26.1
 
 - Fixed a jitter in the `TypeTester` variable-font axis sliders: dragging a slider no longer shifts the handle position as the instance name and value beside it change width. The instance name now settles shortly after dragging stops, and the value reserves a fixed width for its range.

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

@@ -0,0 +1,29 @@
+/**
+ * @generated SignedSource<<ffc76927af300573b576234847d320f2>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+export type TypeTesterFamiliesQuery$variables = Record<PropertyKey, never>;
+export type TypeTesterFamiliesQuery$data = {
+    readonly viewer: {
+        readonly families: {
+            readonly edges: ReadonlyArray<{
+                readonly node: {
+                    readonly featureStyle: {
+                        readonly supportedLanguages: ReadonlyArray<string> | null;
+                    } | null;
+                    readonly id: string;
+                    readonly isVariableFont: boolean;
+                    readonly name: string;
+                } | null;
+            } | null> | null;
+        } | null;
+    };
+};
+export type TypeTesterFamiliesQuery = {
+    response: TypeTesterFamiliesQuery$data;
+    variables: TypeTesterFamiliesQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/TypeTesterFamiliesQuery.graphql.js

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * @generated SignedSource<<ffc76927af300573b576234847d320f2>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = [{
+      "kind": "Literal",
+      "name": "collectionTypes",
+      "value": ["FAMILY"]
+    }, {
+      "kind": "Literal",
+      "name": "first",
+      "value": 999
+    }],
+    v1 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
+    v2 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    v3 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "isVariableFont",
+      "storageKey": null
+    },
+    v4 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "supportedLanguages",
+      "storageKey": null
+    };
+  return {
+    "fragment": {
+      "argumentDefinitions": [],
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "TypeTesterFamiliesQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": "families",
+          "args": v0 /*: any*/,
+          "concreteType": "FontCollectionConnection",
+          "kind": "LinkedField",
+          "name": "fontCollections",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontCollectionEdge",
+            "kind": "LinkedField",
+            "name": "edges",
+            "plural": true,
+            "selections": [{
+              "alias": null,
+              "args": null,
+              "concreteType": "FontCollection",
+              "kind": "LinkedField",
+              "name": "node",
+              "plural": false,
+              "selections": [v1 /*: any*/, v2 /*: any*/, v3 /*: any*/, {
+                "alias": null,
+                "args": null,
+                "concreteType": "FontStyle",
+                "kind": "LinkedField",
+                "name": "featureStyle",
+                "plural": false,
+                "selections": [v4 /*: any*/],
+                "storageKey": null
+              }],
+              "storageKey": null
+            }],
+            "storageKey": null
+          }],
+          "storageKey": "fontCollections(collectionTypes:[\"FAMILY\"],first:999)"
+        }],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": [],
+      "kind": "Operation",
+      "name": "TypeTesterFamiliesQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": "families",
+          "args": v0 /*: any*/,
+          "concreteType": "FontCollectionConnection",
+          "kind": "LinkedField",
+          "name": "fontCollections",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontCollectionEdge",
+            "kind": "LinkedField",
+            "name": "edges",
+            "plural": true,
+            "selections": [{
+              "alias": null,
+              "args": null,
+              "concreteType": "FontCollection",
+              "kind": "LinkedField",
+              "name": "node",
+              "plural": false,
+              "selections": [v1 /*: any*/, v2 /*: any*/, v3 /*: any*/, {
+                "alias": null,
+                "args": null,
+                "concreteType": "FontStyle",
+                "kind": "LinkedField",
+                "name": "featureStyle",
+                "plural": false,
+                "selections": [v4 /*: any*/, v1 /*: any*/],
+                "storageKey": null
+              }],
+              "storageKey": null
+            }],
+            "storageKey": null
+          }],
+          "storageKey": "fontCollections(collectionTypes:[\"FAMILY\"],first:999)"
+        }, v1 /*: any*/],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "528b28072e9b3e44ca8f172cddf1a8e8",
+      "id": null,
+      "metadata": {},
+      "name": "TypeTesterFamiliesQuery",
+      "operationKind": "query",
+      "text": "query TypeTesterFamiliesQuery {\n  viewer {\n    families: fontCollections(collectionTypes: [FAMILY], first: 999) {\n      edges {\n        node {\n          id\n          name\n          isVariableFont\n          featureStyle {\n            supportedLanguages\n            id\n          }\n        }\n      }\n    }\n    id\n  }\n}\n"
+    }
+  };
+}();
+node.hash = "cda53ca94a4951ee5ba29cc57281a002";
+var _default = node;
+exports.default = _default;

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

@@ -0,0 +1,35 @@
+/**
+ * @generated SignedSource<<b4a60f331e32fe73b4a0353e5f05ab36>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+export type TypeTesterFamiliesStylesQuery$variables = {
+    familyId: string;
+};
+export type TypeTesterFamiliesStylesQuery$data = {
+    readonly node: {
+        readonly fontStyles?: ReadonlyArray<{
+            readonly cssStretch: string | null;
+            readonly cssStyle: string | null;
+            readonly cssWeight: string | null;
+            readonly id: string;
+            readonly name: string;
+            readonly variableInstances: ReadonlyArray<{
+                readonly coordinates: ReadonlyArray<{
+                    readonly axis: string;
+                    readonly value: number;
+                }>;
+                readonly name: string;
+            }> | null;
+        }>;
+        readonly id?: string;
+        readonly isVariableFont?: boolean;
+    } | null;
+};
+export type TypeTesterFamiliesStylesQuery = {
+    response: TypeTesterFamiliesStylesQuery$data;
+    variables: TypeTesterFamiliesStylesQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/TypeTesterFamiliesStylesQuery.graphql.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * @generated SignedSource<<b4a60f331e32fe73b4a0353e5f05ab36>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = [{
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "familyId"
+    }],
+    v1 = [{
+      "kind": "Variable",
+      "name": "id",
+      "variableName": "familyId"
+    }],
+    v2 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
+    v3 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "isVariableFont",
+      "storageKey": null
+    },
+    v4 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    v5 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontStyle",
+      "kind": "LinkedField",
+      "name": "fontStyles",
+      "plural": true,
+      "selections": [v2 /*: any*/, v4 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "cssWeight",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "cssStyle",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "cssStretch",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "concreteType": "VariableInstance",
+        "kind": "LinkedField",
+        "name": "variableInstances",
+        "plural": true,
+        "selections": [v4 /*: any*/, {
+          "alias": null,
+          "args": null,
+          "concreteType": "VariableSetting",
+          "kind": "LinkedField",
+          "name": "coordinates",
+          "plural": true,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "axis",
+            "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "value",
+            "storageKey": null
+          }],
+          "storageKey": null
+        }],
+        "storageKey": null
+      }],
+      "storageKey": null
+    };
+  return {
+    "fragment": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "TypeTesterFamiliesStylesQuery",
+      "selections": [{
+        "alias": null,
+        "args": v1 /*: any*/,
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [{
+          "kind": "InlineFragment",
+          "selections": [v2 /*: any*/, v3 /*: any*/, v5 /*: any*/],
+          "type": "FontCollection",
+          "abstractKey": null
+        }],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Operation",
+      "name": "TypeTesterFamiliesStylesQuery",
+      "selections": [{
+        "alias": null,
+        "args": v1 /*: any*/,
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "__typename",
+          "storageKey": null
+        }, v2 /*: any*/, {
+          "kind": "InlineFragment",
+          "selections": [v3 /*: any*/, v5 /*: any*/],
+          "type": "FontCollection",
+          "abstractKey": null
+        }],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "524b879be3afd7fd9e2410ad2e6e163e",
+      "id": null,
+      "metadata": {},
+      "name": "TypeTesterFamiliesStylesQuery",
+      "operationKind": "query",
+      "text": "query TypeTesterFamiliesStylesQuery(\n  $familyId: ID!\n) {\n  node(id: $familyId) {\n    __typename\n    ... on FontCollection {\n      id\n      isVariableFont\n      fontStyles {\n        id\n        name\n        cssWeight\n        cssStyle\n        cssStretch\n        variableInstances {\n          name\n          coordinates {\n            axis\n            value\n          }\n        }\n      }\n    }\n    id\n  }\n}\n"
+    }
+  };
+}();
+node.hash = "feee079c690b83b56cfb01cb81f36dce";
+var _default = node;
+exports.default = _default;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<8935c600423d035424287f49d5825f9e>>
+ * @generated SignedSource<<e14fa9b0b1c7f4042acfca8ac058b4d2>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/TypeTesterStandaloneChangedStylesQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<8935c600423d035424287f49d5825f9e>>
+ * @generated SignedSource<<e14fa9b0b1c7f4042acfca8ac058b4d2>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -230,7 +230,7 @@ const node = function () {
             "kind": "LinkedField",
             "name": "family",
             "plural": false,
-            "selections": [v5 /*: any*/, v2 /*: any*/],
+            "selections": [v2 /*: any*/, v5 /*: any*/],
             "storageKey": null
           }, {
             "alias": null,
@@ -339,12 +339,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "8794481ddef259744fdb4f928f309df9",
+      "cacheID": "6e413da09b13f0918a081f154fa400f7",
       "id": null,
       "metadata": {},
       "name": "TypeTesterStandaloneChangedStylesQuery",
       "operationKind": "query",
-      "text": "query TypeTesterStandaloneChangedStylesQuery(\n  $id: ID!\n  $licenseOptions: [LicenseOptionsSpec]!\n  $orderVariables: [OrderVariableSelectionInput!]\n) {\n  node(id: $id) {\n    __typename\n    ... on FontStyle {\n      id\n      ...TypeTester_fontStyle_4sncub\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_4sncub on Sku {\n  id\n  price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku_4sncub on Sku {\n  id\n  ...SKUPrice_sku_4sncub\n}\n\nfragment TypeTesterFeaturesButton_fontStyle on FontStyle {\n  ...useFeaturesData_fontStyle\n}\n\nfragment TypeTesterFeatures_fontStyle on FontStyle {\n  ...useFeaturesData_fontStyle\n  ...TypeTesterVariableAxes_fontStyle\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\n  supportedLanguages\n  cssWeight\n  cssStyle\n  cssStretch\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  family {\n    name\n    id\n  }\n}\n\nfragment TypeTesterToolbar_fontStyle on FontStyle {\n  ...TypeTesterVariableAxes_fontStyle\n  ...TypeTesterFeaturesButton_fontStyle\n}\n\nfragment TypeTesterVariableAxes_fontStyle on FontStyle {\n  variableAxes {\n    axis\n    name\n    minValue\n    maxValue\n  }\n}\n\nfragment TypeTester_fontStyle_4sncub on FontStyle {\n  id\n  ...TypeTesterFeatures_fontStyle\n  ...TypeTesterStyleSelectData_fontStyle\n  ...FontStyle_fontStyle\n  ...TypeTesterVariableAxes_fontStyle\n  ...TypeTesterToolbar_fontStyle\n  sku {\n    ...SelectButton_sku_4sncub\n    ...SKUPrice_sku_4sncub\n    id\n    basePrice: price {\n      amount\n    }\n  }\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n  }\n}\n"
+      "text": "query TypeTesterStandaloneChangedStylesQuery(\n  $id: ID!\n  $licenseOptions: [LicenseOptionsSpec]!\n  $orderVariables: [OrderVariableSelectionInput!]\n) {\n  node(id: $id) {\n    __typename\n    ... on FontStyle {\n      id\n      ...TypeTester_fontStyle_4sncub\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_4sncub on Sku {\n  id\n  price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku_4sncub on Sku {\n  id\n  ...SKUPrice_sku_4sncub\n}\n\nfragment TypeTesterFeaturesButton_fontStyle on FontStyle {\n  ...useFeaturesData_fontStyle\n}\n\nfragment TypeTesterFeatures_fontStyle on FontStyle {\n  ...useFeaturesData_fontStyle\n  ...TypeTesterVariableAxes_fontStyle\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\n  supportedLanguages\n  cssWeight\n  cssStyle\n  cssStretch\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  family {\n    id\n    name\n  }\n}\n\nfragment TypeTesterToolbar_fontStyle on FontStyle {\n  ...TypeTesterVariableAxes_fontStyle\n  ...TypeTesterFeaturesButton_fontStyle\n}\n\nfragment TypeTesterVariableAxes_fontStyle on FontStyle {\n  variableAxes {\n    axis\n    name\n    minValue\n    maxValue\n  }\n}\n\nfragment TypeTester_fontStyle_4sncub on FontStyle {\n  id\n  ...TypeTesterFeatures_fontStyle\n  ...TypeTesterStyleSelectData_fontStyle\n  ...FontStyle_fontStyle\n  ...TypeTesterVariableAxes_fontStyle\n  ...TypeTesterToolbar_fontStyle\n  sku {\n    ...SelectButton_sku_4sncub\n    ...SKUPrice_sku_4sncub\n    id\n    basePrice: price {\n      amount\n    }\n  }\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<067adfa64bd17d8eb7ec529b8d06265b>>
+ * @generated SignedSource<<0ab5b8a6584a329631edfbefba2a4b55>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -7,7 +7,6 @@ import { ConcreteRequest } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type TypeTesterStandaloneQuery$variables = {
     familyName: string;
-    selectable: boolean;
     styleName: string;
 };
 export type TypeTesterStandaloneQuery$data = {
@@ -22,7 +21,6 @@ export type TypeTesterStandaloneQuery$data = {
             readonly id: string;
             readonly " $fragmentSpreads": FragmentRefs<"TypeTester_fontStyle">;
         } | null;
-        readonly " $fragmentSpreads": FragmentRefs<"TypeTester_viewer">;
     };
 };
 export type TypeTesterStandaloneQuery = {