fontdue-js 2.15.0 → 2.16.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 2.16.0
+
+- Adds data-tags attribute to the `TypeTesters`
+
+## 2.15.1
+
+- Fixes SSR hydration issues
+
+## 2.15.0
+
+- Compatibility with React 19
+
 ## 2.14.0
 
 - Adds stripe.appearance to the config

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f0d878bad3783039c7a23d6aac28d635>>
+ * @generated SignedSource<<94b5d191e2d009e3c429a070604ade9a>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/TypeTestersIDQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<f0d878bad3783039c7a23d6aac28d635>>
+ * @generated SignedSource<<94b5d191e2d009e3c429a070604ade9a>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -518,6 +518,12 @@ const node = function () {
                     "storageKey": null
                   }, v15 /*: any*/],
                   "storageKey": null
+                }, {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "tags",
+                  "storageKey": null
                 }],
                 "storageKey": null
               }],
@@ -553,12 +559,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "1bd04fcecc86c7434859a534427568e7",
+      "cacheID": "b76d1b4332733cb59fa65c1a8fe4987b",
       "id": null,
       "metadata": {},
       "name": "TypeTestersIDQuery",
       "operationKind": "query",
-      "text": "query TypeTestersIDQuery(\n  $collectionId: ID!\n  $tags: [String!]\n  $excludeTags: [String!]\n  $selectable: Boolean!\n) {\n  viewer {\n    ...TypeTesters_viewer_4g9a6U\n    id\n  }\n  collection: node(id: $collectionId) {\n    __typename\n    ...TypeTesters_collection_4Goyz5\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment PriceBarSection_node_3BtHDv on FontCollection {\n  id\n  name\n  collectionType\n  sku {\n    ...SelectButton_sku_3BtHDv\n    id\n    priceWithLicenseOptions: price(licenseOptions: [], orderVariables: []) {\n      ...Price_price\n    }\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: []) {\n    ...Price_price\n  }\n}\n\nfragment PriceBar_node_3BtHDv on FontCollection {\n  ...PriceBarSection_node_3BtHDv\n  parent {\n    ...PriceBarSection_node_3BtHDv\n    id\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_3BtHDv on Sku {\n  id\n  price(licenseOptions: [], orderVariables: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku_3BtHDv on Sku {\n  id\n  ...SKUPrice_sku_3BtHDv\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 TypeTesterFloatingToolbar_testers on TypeTester {\n  id\n  fontStyle {\n    ...TypeTesterToolbar_fontStyle\n    ...TypeTesterFeatures_fontStyle\n    id\n  }\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\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 TypeTesterStyleSelectData_viewer_4g9a6U on Viewer {\n  families: fontCollections(collectionTypes: [FAMILY], first: 999) @include(if: $selectable) {\n    edges {\n      node {\n        id\n        name\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    }\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_3BtHDv on FontStyle {\n  id\n  ...TypeTesterFeatures_fontStyle\n  ...TypeTesterStyleSelectData_fontStyle\n  ...FontStyle_fontStyle\n  ...TypeTesterVariableAxes_fontStyle\n  ...TypeTesterToolbar_fontStyle\n  family {\n    cssUrl\n    id\n  }\n  sku {\n    ...SelectButton_sku_3BtHDv\n    ...SKUPrice_sku_3BtHDv\n    id\n    basePrice: price {\n      amount\n    }\n  }\n}\n\nfragment TypeTester_viewer_4g9a6U on Viewer {\n  ...TypeTesterStyleSelectData_viewer_4g9a6U\n}\n\nfragment TypeTesters_collection_4Goyz5 on FontCollection {\n  typeTesters(first: 999, tags: $tags, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        content\n        size\n        lineHeight\n        letterSpacing\n        autofit\n        direction\n        fontStyle {\n          ...TypeTester_fontStyle_3BtHDv\n          id\n          family {\n            id\n          }\n        }\n        variableSettings {\n          axis\n          value\n        }\n        featureSettings {\n          feature\n          value\n        }\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  typeTesterAxes\n  id\n  ...PriceBar_node_3BtHDv\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node_3BtHDv\n  }\n  parent {\n    id\n  }\n}\n\nfragment TypeTesters_viewer_4g9a6U on Viewer {\n  ...TypeTester_viewer_4g9a6U\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n"
+      "text": "query TypeTestersIDQuery(\n  $collectionId: ID!\n  $tags: [String!]\n  $excludeTags: [String!]\n  $selectable: Boolean!\n) {\n  viewer {\n    ...TypeTesters_viewer_4g9a6U\n    id\n  }\n  collection: node(id: $collectionId) {\n    __typename\n    ...TypeTesters_collection_4Goyz5\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment PriceBarSection_node_3BtHDv on FontCollection {\n  id\n  name\n  collectionType\n  sku {\n    ...SelectButton_sku_3BtHDv\n    id\n    priceWithLicenseOptions: price(licenseOptions: [], orderVariables: []) {\n      ...Price_price\n    }\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: []) {\n    ...Price_price\n  }\n}\n\nfragment PriceBar_node_3BtHDv on FontCollection {\n  ...PriceBarSection_node_3BtHDv\n  parent {\n    ...PriceBarSection_node_3BtHDv\n    id\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_3BtHDv on Sku {\n  id\n  price(licenseOptions: [], orderVariables: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku_3BtHDv on Sku {\n  id\n  ...SKUPrice_sku_3BtHDv\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 TypeTesterFloatingToolbar_testers on TypeTester {\n  id\n  fontStyle {\n    ...TypeTesterToolbar_fontStyle\n    ...TypeTesterFeatures_fontStyle\n    id\n  }\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\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 TypeTesterStyleSelectData_viewer_4g9a6U on Viewer {\n  families: fontCollections(collectionTypes: [FAMILY], first: 999) @include(if: $selectable) {\n    edges {\n      node {\n        id\n        name\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    }\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_3BtHDv on FontStyle {\n  id\n  ...TypeTesterFeatures_fontStyle\n  ...TypeTesterStyleSelectData_fontStyle\n  ...FontStyle_fontStyle\n  ...TypeTesterVariableAxes_fontStyle\n  ...TypeTesterToolbar_fontStyle\n  family {\n    cssUrl\n    id\n  }\n  sku {\n    ...SelectButton_sku_3BtHDv\n    ...SKUPrice_sku_3BtHDv\n    id\n    basePrice: price {\n      amount\n    }\n  }\n}\n\nfragment TypeTester_viewer_4g9a6U on Viewer {\n  ...TypeTesterStyleSelectData_viewer_4g9a6U\n}\n\nfragment TypeTesters_collection_4Goyz5 on FontCollection {\n  typeTesters(first: 999, tags: $tags, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        content\n        size\n        lineHeight\n        letterSpacing\n        autofit\n        direction\n        fontStyle {\n          ...TypeTester_fontStyle_3BtHDv\n          id\n          family {\n            id\n          }\n        }\n        variableSettings {\n          axis\n          value\n        }\n        featureSettings {\n          feature\n          value\n        }\n        tags\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  typeTesterAxes\n  id\n  ...PriceBar_node_3BtHDv\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node_3BtHDv\n  }\n  parent {\n    id\n  }\n}\n\nfragment TypeTesters_viewer_4g9a6U on Viewer {\n  ...TypeTester_viewer_4g9a6U\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<d7dfeb9b63f530f7188702c279aa090e>>
+ * @generated SignedSource<<20a5cba73c3c7720810ea0fe15e6b4f2>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/TypeTestersRefetchQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<d7dfeb9b63f530f7188702c279aa090e>>
+ * @generated SignedSource<<20a5cba73c3c7720810ea0fe15e6b4f2>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -441,6 +441,12 @@ const node = function () {
                     "storageKey": null
                   }, v13 /*: any*/],
                   "storageKey": null
+                }, {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "tags",
+                  "storageKey": null
                 }],
                 "storageKey": null
               }],
@@ -480,15 +486,15 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "7707201442bb1c24b64bf1714d8a385e",
+      "cacheID": "af929eba890f273bb737138085843f46",
       "id": null,
       "metadata": {},
       "name": "TypeTestersRefetchQuery",
       "operationKind": "query",
-      "text": "query TypeTestersRefetchQuery(\n  $excludeTags: [String!] = null\n  $licenseOptions: [LicenseOptionsSpec] = []\n  $orderVariables: [OrderVariableSelectionInput!] = []\n  $tags: [String!] = null\n  $id: ID!\n) {\n  node(id: $id) {\n    __typename\n    ...TypeTesters_collection_32it0Z\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment PriceBarSection_node_4sncub on FontCollection {\n  id\n  name\n  collectionType\n  sku {\n    ...SelectButton_sku_4sncub\n    id\n    priceWithLicenseOptions: price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n      ...Price_price\n    }\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: $licenseOptions) {\n    ...Price_price\n  }\n}\n\nfragment PriceBar_node_4sncub on FontCollection {\n  ...PriceBarSection_node_4sncub\n  parent {\n    ...PriceBarSection_node_4sncub\n    id\n  }\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 TypeTesterFloatingToolbar_testers on TypeTester {\n  id\n  fontStyle {\n    ...TypeTesterToolbar_fontStyle\n    ...TypeTesterFeatures_fontStyle\n    id\n  }\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\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  family {\n    cssUrl\n    id\n  }\n  sku {\n    ...SelectButton_sku_4sncub\n    ...SKUPrice_sku_4sncub\n    id\n    basePrice: price {\n      amount\n    }\n  }\n}\n\nfragment TypeTesters_collection_32it0Z on FontCollection {\n  typeTesters(first: 999, tags: $tags, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        content\n        size\n        lineHeight\n        letterSpacing\n        autofit\n        direction\n        fontStyle {\n          ...TypeTester_fontStyle_4sncub\n          id\n          family {\n            id\n          }\n        }\n        variableSettings {\n          axis\n          value\n        }\n        featureSettings {\n          feature\n          value\n        }\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  typeTesterAxes\n  id\n  ...PriceBar_node_4sncub\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node_4sncub\n  }\n  parent {\n    id\n  }\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n"
+      "text": "query TypeTestersRefetchQuery(\n  $excludeTags: [String!] = null\n  $licenseOptions: [LicenseOptionsSpec] = []\n  $orderVariables: [OrderVariableSelectionInput!] = []\n  $tags: [String!] = null\n  $id: ID!\n) {\n  node(id: $id) {\n    __typename\n    ...TypeTesters_collection_32it0Z\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment PriceBarSection_node_4sncub on FontCollection {\n  id\n  name\n  collectionType\n  sku {\n    ...SelectButton_sku_4sncub\n    id\n    priceWithLicenseOptions: price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n      ...Price_price\n    }\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: $licenseOptions) {\n    ...Price_price\n  }\n}\n\nfragment PriceBar_node_4sncub on FontCollection {\n  ...PriceBarSection_node_4sncub\n  parent {\n    ...PriceBarSection_node_4sncub\n    id\n  }\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 TypeTesterFloatingToolbar_testers on TypeTester {\n  id\n  fontStyle {\n    ...TypeTesterToolbar_fontStyle\n    ...TypeTesterFeatures_fontStyle\n    id\n  }\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\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  family {\n    cssUrl\n    id\n  }\n  sku {\n    ...SelectButton_sku_4sncub\n    ...SKUPrice_sku_4sncub\n    id\n    basePrice: price {\n      amount\n    }\n  }\n}\n\nfragment TypeTesters_collection_32it0Z on FontCollection {\n  typeTesters(first: 999, tags: $tags, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        content\n        size\n        lineHeight\n        letterSpacing\n        autofit\n        direction\n        fontStyle {\n          ...TypeTester_fontStyle_4sncub\n          id\n          family {\n            id\n          }\n        }\n        variableSettings {\n          axis\n          value\n        }\n        featureSettings {\n          feature\n          value\n        }\n        tags\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  typeTesterAxes\n  id\n  ...PriceBar_node_4sncub\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node_4sncub\n  }\n  parent {\n    id\n  }\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n"
     }
   };
 }();
-node.hash = "6f88c9b86f2c60ecc35f1be282b3ee50";
+node.hash = "0f8422550dd500368594bfedc5f58bf4";
 var _default = node;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<e592966b3436eb5abe53b64294ed9796>>
+ * @generated SignedSource<<336fbf3445bf08b7ba432f258245a31f>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/TypeTestersSlugQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<e592966b3436eb5abe53b64294ed9796>>
+ * @generated SignedSource<<336fbf3445bf08b7ba432f258245a31f>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -524,6 +524,12 @@ const node = function () {
                       "storageKey": null
                     }, v15 /*: any*/],
                     "storageKey": null
+                  }, {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "tags",
+                    "storageKey": null
                   }],
                   "storageKey": null
                 }],
@@ -560,12 +566,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "6642607e781f3a02be23b132955cb71d",
+      "cacheID": "51eebc5e6173227dc8993607cbb18eed",
       "id": null,
       "metadata": {},
       "name": "TypeTestersSlugQuery",
       "operationKind": "query",
-      "text": "query TypeTestersSlugQuery(\n  $collectionSlug: String!\n  $tags: [String!]\n  $excludeTags: [String!]\n  $selectable: Boolean!\n) {\n  viewer {\n    ...TypeTesters_viewer_4g9a6U\n    slug(name: $collectionSlug) {\n      collection: fontCollection {\n        ...TypeTesters_collection_4Goyz5\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment PriceBarSection_node_3BtHDv on FontCollection {\n  id\n  name\n  collectionType\n  sku {\n    ...SelectButton_sku_3BtHDv\n    id\n    priceWithLicenseOptions: price(licenseOptions: [], orderVariables: []) {\n      ...Price_price\n    }\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: []) {\n    ...Price_price\n  }\n}\n\nfragment PriceBar_node_3BtHDv on FontCollection {\n  ...PriceBarSection_node_3BtHDv\n  parent {\n    ...PriceBarSection_node_3BtHDv\n    id\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_3BtHDv on Sku {\n  id\n  price(licenseOptions: [], orderVariables: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku_3BtHDv on Sku {\n  id\n  ...SKUPrice_sku_3BtHDv\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 TypeTesterFloatingToolbar_testers on TypeTester {\n  id\n  fontStyle {\n    ...TypeTesterToolbar_fontStyle\n    ...TypeTesterFeatures_fontStyle\n    id\n  }\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\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 TypeTesterStyleSelectData_viewer_4g9a6U on Viewer {\n  families: fontCollections(collectionTypes: [FAMILY], first: 999) @include(if: $selectable) {\n    edges {\n      node {\n        id\n        name\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    }\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_3BtHDv on FontStyle {\n  id\n  ...TypeTesterFeatures_fontStyle\n  ...TypeTesterStyleSelectData_fontStyle\n  ...FontStyle_fontStyle\n  ...TypeTesterVariableAxes_fontStyle\n  ...TypeTesterToolbar_fontStyle\n  family {\n    cssUrl\n    id\n  }\n  sku {\n    ...SelectButton_sku_3BtHDv\n    ...SKUPrice_sku_3BtHDv\n    id\n    basePrice: price {\n      amount\n    }\n  }\n}\n\nfragment TypeTester_viewer_4g9a6U on Viewer {\n  ...TypeTesterStyleSelectData_viewer_4g9a6U\n}\n\nfragment TypeTesters_collection_4Goyz5 on FontCollection {\n  typeTesters(first: 999, tags: $tags, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        content\n        size\n        lineHeight\n        letterSpacing\n        autofit\n        direction\n        fontStyle {\n          ...TypeTester_fontStyle_3BtHDv\n          id\n          family {\n            id\n          }\n        }\n        variableSettings {\n          axis\n          value\n        }\n        featureSettings {\n          feature\n          value\n        }\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  typeTesterAxes\n  id\n  ...PriceBar_node_3BtHDv\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node_3BtHDv\n  }\n  parent {\n    id\n  }\n}\n\nfragment TypeTesters_viewer_4g9a6U on Viewer {\n  ...TypeTester_viewer_4g9a6U\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n"
+      "text": "query TypeTestersSlugQuery(\n  $collectionSlug: String!\n  $tags: [String!]\n  $excludeTags: [String!]\n  $selectable: Boolean!\n) {\n  viewer {\n    ...TypeTesters_viewer_4g9a6U\n    slug(name: $collectionSlug) {\n      collection: fontCollection {\n        ...TypeTesters_collection_4Goyz5\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment PriceBarSection_node_3BtHDv on FontCollection {\n  id\n  name\n  collectionType\n  sku {\n    ...SelectButton_sku_3BtHDv\n    id\n    priceWithLicenseOptions: price(licenseOptions: [], orderVariables: []) {\n      ...Price_price\n    }\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: []) {\n    ...Price_price\n  }\n}\n\nfragment PriceBar_node_3BtHDv on FontCollection {\n  ...PriceBarSection_node_3BtHDv\n  parent {\n    ...PriceBarSection_node_3BtHDv\n    id\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_3BtHDv on Sku {\n  id\n  price(licenseOptions: [], orderVariables: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku_3BtHDv on Sku {\n  id\n  ...SKUPrice_sku_3BtHDv\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 TypeTesterFloatingToolbar_testers on TypeTester {\n  id\n  fontStyle {\n    ...TypeTesterToolbar_fontStyle\n    ...TypeTesterFeatures_fontStyle\n    id\n  }\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\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 TypeTesterStyleSelectData_viewer_4g9a6U on Viewer {\n  families: fontCollections(collectionTypes: [FAMILY], first: 999) @include(if: $selectable) {\n    edges {\n      node {\n        id\n        name\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    }\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_3BtHDv on FontStyle {\n  id\n  ...TypeTesterFeatures_fontStyle\n  ...TypeTesterStyleSelectData_fontStyle\n  ...FontStyle_fontStyle\n  ...TypeTesterVariableAxes_fontStyle\n  ...TypeTesterToolbar_fontStyle\n  family {\n    cssUrl\n    id\n  }\n  sku {\n    ...SelectButton_sku_3BtHDv\n    ...SKUPrice_sku_3BtHDv\n    id\n    basePrice: price {\n      amount\n    }\n  }\n}\n\nfragment TypeTester_viewer_4g9a6U on Viewer {\n  ...TypeTesterStyleSelectData_viewer_4g9a6U\n}\n\nfragment TypeTesters_collection_4Goyz5 on FontCollection {\n  typeTesters(first: 999, tags: $tags, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        content\n        size\n        lineHeight\n        letterSpacing\n        autofit\n        direction\n        fontStyle {\n          ...TypeTester_fontStyle_3BtHDv\n          id\n          family {\n            id\n          }\n        }\n        variableSettings {\n          axis\n          value\n        }\n        featureSettings {\n          feature\n          value\n        }\n        tags\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  typeTesterAxes\n  id\n  ...PriceBar_node_3BtHDv\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node_3BtHDv\n  }\n  parent {\n    id\n  }\n}\n\nfragment TypeTesters_viewer_4g9a6U on Viewer {\n  ...TypeTester_viewer_4g9a6U\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<842ed9fbeaf4b40cce7e057fedf65418>>
+ * @generated SignedSource<<75efdd64f4cf6c5d2378da307264aa2c>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -37,6 +37,7 @@ export type TypeTesters_collection$data = {
                 readonly letterSpacing: string | null;
                 readonly lineHeight: string | null;
                 readonly size: string | null;
+                readonly tags: ReadonlyArray<string> | null;
                 readonly variableSettings: ReadonlyArray<{
                     readonly axis: string;
                     readonly value: number;

package/dist/__generated__/TypeTesters_collection.graphql.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _TypeTestersRefetchQuery = _interopRequireDefault(require("./TypeTestersRefetchQuery.graphql"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
- * @generated SignedSource<<842ed9fbeaf4b40cce7e057fedf65418>>
+ * @generated SignedSource<<75efdd64f4cf6c5d2378da307264aa2c>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -198,6 +198,12 @@ const node = function () {
               "storageKey": null
             }, v3 /*: any*/],
             "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "tags",
+            "storageKey": null
           }, {
             "args": null,
             "kind": "FragmentSpread",
@@ -247,6 +253,6 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "6f88c9b86f2c60ecc35f1be282b3ee50";
+node.hash = "0f8422550dd500368594bfedc5f58bf4";
 var _default = node;
 exports.default = _default;

package/dist/components/CharacterViewer/index.js

@@ -33,13 +33,20 @@ function useSize() {
     if (!ref.current) return;
     setSize(ref.current.getBoundingClientRect());
   }, [ref]);
-  (0, _resizeObserver.default)(ref, entry => setSize(entry.contentRect));
+  (0, _resizeObserver.default)(ref, entry => setSize(entry.contentRect), {
+    polyfill: typeof window === 'undefined' ? ServerSideResizeObserverPolyfill : null
+  });
   return {
     ref,
     width: size === null || size === void 0 ? void 0 : size.width,
     height: size === null || size === void 0 ? void 0 : size.height
   };
 }
+class ServerSideResizeObserverPolyfill {
+  constructor(_callback) {}
+  observe(_target, _options) {}
+  unobserve(_target) {}
+}
 function Character(props) {
   const ref = (0, _react.useRef)(null);
   const [size, setSize] = (0, _react.useState)(1);
@@ -47,6 +54,8 @@ function Character(props) {
     if (entry.target.scrollWidth > entry.target.clientWidth) {
       setSize(size + 1);
     }
+  }, {
+    polyfill: typeof window === 'undefined' ? ServerSideResizeObserverPolyfill : null
   });
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     ref: ref

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

@@ -64,6 +64,7 @@ interface TypeTesterProps extends TypeTesterBaseProps {
     fontStyle: TypeTester_fontStyle$key | null;
     viewer: TypeTester_viewer$key;
     onStyleSelect: (fontStyleId: string) => void;
+    tags?: readonly string[] | null;
     isLoading?: boolean;
 }
 declare const TypeTester: React.FunctionComponent<TypeTesterProps>;

package/dist/components/TypeTester/index.js

@@ -31,6 +31,7 @@ const TypeTester = _ref => {
     productId,
     fontStyle: fontStyleKey,
     viewer: viewerKey,
+    tags,
     onFocus,
     onBlur,
     features,
@@ -78,7 +79,8 @@ const TypeTester = _ref => {
     "data-shy": config.shy,
     "data-select-button-style": config.selectButtonStyle,
     "data-alignment": props.alignment,
-    "data-loading": isLoading
+    "data-loading": isLoading,
+    "data-tags": tags === null || tags === void 0 ? void 0 : tags.join(' ')
   }, axesPosition === 'above' ? /*#__PURE__*/_react.default.createElement(_TypeTesterVariableAxes.default, {
     id: id,
     axes: axes,

package/dist/components/TypeTesters/index.d.ts

@@ -7,8 +7,8 @@ export interface TypeTesters_props {
     collectionSlug?: string;
     defaultMode?: 'group' | 'local';
     autofit?: boolean;
-    tags?: string[];
-    excludeTags?: string[];
+    tags?: string[] | null;
+    excludeTags?: string[] | null;
     onFocus?: () => void;
     onBlur?: () => void;
     onToolbarOpenClose?: (open: boolean) => void;

package/dist/components/TypeTesters/index.js

@@ -80,7 +80,7 @@ function TypeTestersComponent(_ref) {
     licenseOptionsSpecs,
     orderVariableSelections
   } = (0, _useLicenseAndOrderVariables.useLicenseAndOrderVariables)();
-  const [collection, refetch] = (0, _reactRelay.useRefetchableFragment)((_TypeTesters_collection2.default.hash && _TypeTesters_collection2.default.hash !== "6f88c9b86f2c60ecc35f1be282b3ee50" && console.error("The definition of 'TypeTesters_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesters_collection2.default), collectionKey);
+  const [collection, refetch] = (0, _reactRelay.useRefetchableFragment)((_TypeTesters_collection2.default.hash && _TypeTesters_collection2.default.hash !== "0f8422550dd500368594bfedc5f58bf4" && console.error("The definition of 'TypeTesters_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesters_collection2.default), collectionKey);
   const handleStyleSelect = (0, _react.useCallback)((testerId, fontStyleId) => {
     const newChangedStyles = {
       ...changedStyles,
@@ -181,7 +181,8 @@ function TypeTestersComponent(_ref) {
         productId: productId,
         features: collection.typeTesterFeatures,
         axes: collection.typeTesterAxes,
-        viewer: viewer
+        viewer: viewer,
+        tags: node.tags
       }));
     }));
   }));

package/dist/components/TypeTesters/index.server.js

@@ -15,8 +15,8 @@ async function TypeTesters(_ref) {
   let {
     collectionId,
     collectionSlug,
-    tags,
-    excludeTags,
+    tags = null,
+    excludeTags = null,
     ...rest
   } = _ref;
   if (collectionId) {

package/dist/relay/environment.js

@@ -30,7 +30,11 @@ function createNetworkFetch(options) {
       body: JSON.stringify({
         query: request.text,
         variables
-      })
+      }),
+      // @ts-ignore
+      next: {
+        tags: ['graphql', `operation:${request.name}`]
+      }
     });
     const json = await resp.json();
 

package/dist/relay/loadSerializableQuery.d.ts

@@ -4,4 +4,44 @@ export interface SerializablePreloadedQuery<TQuery extends OperationType> {
     variables: VariablesOf<TQuery>;
     response: GraphQLResponse;
 }
-export default function loadSerializableQuery<TQuery extends OperationType>(query: GraphQLTaggedNode, variables: VariablesOf<TQuery>): Promise<SerializablePreloadedQuery<TQuery>>;
+/**
+ * RELAY CACHE KEY NORMALIZATION
+ *
+ * This type transformation is required to fix a cache key inconsistency issue in Relay.
+ *
+ * THE PROBLEM:
+ * Relay's `getOperationVariables()` function always includes ALL argumentDefinitions
+ * from the GraphQL operation, even optional ones, setting them to their defaultValue
+ * (typically null). This means when Relay generates cache keys, it creates entries like:
+ *
+ * Cache Key A: { collectionId: "123", tags: null, excludeTags: null, selectable: true }
+ * Cache Key B: { collectionId: "123", selectable: true }  // when optional vars omitted
+ *
+ * Even though these represent the same logical query, they produce different cache keys
+ * because `JSON.stringify(stableCopy(variables))` serializes them differently.
+ *
+ *  (This is possibly caused by NextJS RSC data serialization and hydration)
+ *
+ * THE ROOT CAUSE:
+ * - GraphQL schema defines: `$tags: [String!], $excludeTags: [String!]` (optional)
+ * - TypeScript generates: `tags?: ReadonlyArray<string> | null`
+ * - Relay's argumentDefinitions include: `{ name: "tags", defaultValue: null }`
+ * - getOperationVariables() always sets: `operationVariables[def.name] = def.defaultValue`
+ *
+ * THE SOLUTION:
+ * RequireAllWithNull<T> transforms optional properties to required properties with
+ * explicit null values, forcing callers to be consistent. This ensures server-side
+ * preloaded queries and client-side cache lookups use identical variable structures.
+ *
+ * USAGE:
+ * Instead of: { tags, excludeTags } // undefined values
+ * Use:        { tags: tags ?? null, excludeTags: excludeTags ?? null } // explicit nulls
+ *
+ * This eliminates cache misses caused by variable structure inconsistencies between
+ * server-side rendering and client-side Relay operations.
+ */
+type RequireAllWithNull<T> = {
+    [K in keyof T]-?: T[K] | null;
+};
+export default function loadSerializableQuery<TQuery extends OperationType>(query: GraphQLTaggedNode, variables: RequireAllWithNull<VariablesOf<TQuery>>): Promise<SerializablePreloadedQuery<TQuery>>;
+export {};

package/dist/relay/loadSerializableQuery.js

@@ -5,6 +5,43 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = loadSerializableQuery;
 var _environment = require("./environment");
+/**
+ * RELAY CACHE KEY NORMALIZATION
+ *
+ * This type transformation is required to fix a cache key inconsistency issue in Relay.
+ *
+ * THE PROBLEM:
+ * Relay's `getOperationVariables()` function always includes ALL argumentDefinitions
+ * from the GraphQL operation, even optional ones, setting them to their defaultValue
+ * (typically null). This means when Relay generates cache keys, it creates entries like:
+ *
+ * Cache Key A: { collectionId: "123", tags: null, excludeTags: null, selectable: true }
+ * Cache Key B: { collectionId: "123", selectable: true }  // when optional vars omitted
+ *
+ * Even though these represent the same logical query, they produce different cache keys
+ * because `JSON.stringify(stableCopy(variables))` serializes them differently.
+ *
+ *  (This is possibly caused by NextJS RSC data serialization and hydration)
+ *
+ * THE ROOT CAUSE:
+ * - GraphQL schema defines: `$tags: [String!], $excludeTags: [String!]` (optional)
+ * - TypeScript generates: `tags?: ReadonlyArray<string> | null`
+ * - Relay's argumentDefinitions include: `{ name: "tags", defaultValue: null }`
+ * - getOperationVariables() always sets: `operationVariables[def.name] = def.defaultValue`
+ *
+ * THE SOLUTION:
+ * RequireAllWithNull<T> transforms optional properties to required properties with
+ * explicit null values, forcing callers to be consistent. This ensures server-side
+ * preloaded queries and client-side cache lookups use identical variable structures.
+ *
+ * USAGE:
+ * Instead of: { tags, excludeTags } // undefined values
+ * Use:        { tags: tags ?? null, excludeTags: excludeTags ?? null } // explicit nulls
+ *
+ * This eliminates cache misses caused by variable structure inconsistencies between
+ * server-side rendering and client-side Relay operations.
+ */
+
 // Call into raw network fetch to get serializable GraphQL query response
 // This response will be sent to the client to "warm" the QueryResponseCache
 // to avoid the client fetches.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",
@@ -30,9 +30,9 @@
     "react-device-detect": "^2.2.3",
     "react-error-boundary": "^4.1.2",
     "react-redux": "^9",
-    "react-relay": "^19.0.0",
+    "react-relay": "^20.0.0",
     "redux": "^5.0.0",
-    "relay-runtime": "^19.0.0",
+    "relay-runtime": "^20.0.0",
     "store": "^2.0.12",
     "uuid": "^8.3.2"
   },
@@ -44,10 +44,11 @@
     "@babel/preset-typescript": "^7.18.0",
     "@types/draft-js": "^0.10.44",
     "@types/fontfaceobserver": "^2.1.0",
+    "@types/node": "^24.1.0",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
-    "@types/react-relay": "^16.0.0",
-    "@types/relay-runtime": "^17.0.0",
+    "@types/react-relay": "^18.0.0",
+    "@types/relay-runtime": "^19.0.0",
     "@types/uuid": "^8.3.3",
     "babel-plugin-relay": "^18.0.0",
     "npm-run-all": "^4.1.5",