fontdue-js 3.2.6 → 3.3.0

package/CHANGELOG.md

@@ -1,39 +1,43 @@
+## 3.3.0
+
+- Fixed one page being counted as many pageviews. Sites that rewrite the URL without navigating — scroll restoration, shallow routing — counted a view per rewrite, inflating Pageviews and Top pages in your Fontdue dashboard. Only a change of URL counts now.
+- `CharacterViewer` names the OpenType feature a glyph belongs to in the glyph details — "Single-Story a (ss01)" rather than the bare tag. Names come from the font itself where the designer set one, falling back to the standard OpenType names; `TypeTester`'s features panel uses the same names.
+
 ## 3.2.6
 
-- **Fixed `TypeTesters` crashing when `tags` or `excludeTags` is set on a server-rendered page.** In a React Server Component the server entry preloaded the filtered testers but rendered the client component as though no filter had been given, so the refetch that runs once the page hydrates pulled in the collection's *whole* tester list. Rendering a tester the filter had excluded then threw `Cannot destructure property 'content' of … as it is undefined` and took the page down with it. Both filters now reach the client component on the preloaded path, as they already did when the component fetches its own query in the browser. No public API change.
+- Fixed `TypeTesters` taking the page down on hydration when `tags` or `excludeTags` was set on a server-rendered page. Both filters now survive the handoff to the browser.
 
 ## 3.2.5
 
-- **`CartButton` is back in the server-rendered HTML.** Since 3.0.0 it rendered nothing at all until its cart query resolved in the browser, so the button was absent from the initial HTML and only appeared after hydration and a network round-trip — missing for crawlers, and a visible pop-in for everyone else. It now server-renders its empty state (`data-count="0"`) and fills in the count once the cart loads, as it did on 2.x. No public API change.
+- `CartButton` is back in the server-rendered HTML. Since 3.0.0 it appeared only after hydration — missing for crawlers, a visible pop-in for everyone else. It now renders its empty state straight away and fills in the count once the cart loads.
 
 ## 3.2.4
 
-- **The `StoreModal` checkout no longer advances past the customer step when the customer fails to save.** A rejected save — an invalid email, a duplicate record — previously moved the buyer on to payment with their details unsaved. The step now holds and shows the field errors. No public API change.
-- **Per-customer coupon limits are surfaced at checkout.** When a buyer enters an email address that has used up its allowance on a coupon, the checkout shows the reason and keeps them on the customer step so they can remove the code from the cart.
+- The `StoreModal` checkout no longer moves a buyer on to payment when their details fail to save. The step holds and shows the field errors.
+- Per-customer coupon limits are surfaced at checkout. A buyer whose email has used up its allowance on a coupon is told why, and kept on the customer step to remove the code.
 
 ## 3.2.3
 
-- **Fixed `TypeTester` text drifting out of alignment at small font sizes.** The automatic columns (`columns: {count: 'auto', width: '40ch', gap: '1em'}` by default) sat on the full-width text container, and `ch` tracks the font size — so once the font was small enough for two columns to fit, multicol partitioned the strip and short content landed in the first column, leaving `alignment="center"` centred within *that column* rather than the tester. Right-aligned and RTL testers drifted the same way. The column properties now ride on the inner `[data-contents]` block, which shrink-wraps (`width: max-content`, capped at 100%) and is placed by alignment-driven auto margins; wrapping content still spans the full width and flows into columns as before. The editable container keeps its full width, so click-anywhere-to-edit and autofit width measurement are unchanged, and the SSR branch renders the same wrapper so the first paint matches. Truncating testers keep their columns on the height-capped container their sideways-overflow design requires. Ships new stylesheet rules, so take the `fontdue-js/dist/fontdue.css` from this version alongside the JS.
-- Also fixed centred testers sitting half the autofit side buffer off centre at *every* size — the buffer was applied entirely on one side and is now split across both.
-- **`FontdueAdminToolbar`: the collapsed pill now carries the Fontdue wordmark** — *Fontdue* idle, *Fontdue · Previewing hidden fonts* while previewing, *Fontdue · Preview expired* when the token lapses, matching the connection-error pill's existing wording. The `F` mark and the warning glyph leave the pill (the mark still brands the panel header, the glyph the expired notice). If you style the toolbar yourself: `__mark` no longer appears inside `__button`, and the expired suffix is a new `__expired-suffix` span. Chrome, sizing, shadow, the panel, and `data-testid="preview-toggle"` are unchanged.
+- Fixed `TypeTester` text drifting out of alignment. Centred, right-aligned and RTL testers sat off-centre once the font was small enough for the text to flow into columns, and centred testers were slightly off at every size. Ships new stylesheet rules, so take `fontdue-js/dist/fontdue.css` from this version alongside the JS.
+- The collapsed `FontdueAdminToolbar` pill now carries the Fontdue wordmark — Fontdue, Fontdue · Previewing hidden fonts, Fontdue · Preview expired. If you style the toolbar yourself, `__mark` has left `__button` and the expired suffix is a new `__expired-suffix` span.
 
 ## 3.2.2
 
-- **Fixed the reCAPTCHA forms failing to server-render under Vite SSR** (Astro, and any framework whose dev SSR externalizes CJS deps through Node's ESM interop). 3.2.1 switched to `react-google-recaptcha`'s default export, which bundlers honouring the `__esModule` marker (webpack/Next, and Vite's browser optimizer) unwrap straight to the widget wrapper — but Node's strict ESM↔CJS interop models that same default import as the whole module *namespace*, so `<ReCAPTCHA>` was an object at SSR time. React threw "Element type is invalid … got: object" and the checkout, `NewsletterSignup` and `TestFontsForm` islands fell back to client rendering with a console error. The re-export now normalises the binding (`__esModule ? .default : obj`), resolving the wrapper on every path. A no-op for webpack and Vite's browser build. No public API change.
+- Fixed the reCAPTCHA forms failing to server-render under Vite SSR (Astro, and any framework whose dev SSR externalizes CJS dependencies). The checkout, `NewsletterSignup` and `TestFontsForm` islands fell back to client rendering with a console error. A no-op for webpack and Next.
 
 ## 3.2.1
 
-- **Fixed checkout, newsletter signup and trial-font downloads hanging forever on reCAPTCHA-enabled foundries.** `StoreModalUnifiedCheckout`, `NewsletterSignup` and `TestFontsForm` imported the *named* `ReCAPTCHA` export from `react-google-recaptcha` — the barebone widget, which never injects Google's `api.js` and expects you to supply `grecaptcha` yourself. So the invisible widget rendered an empty `<div>`, `window.grecaptcha` stayed undefined, `execute()` was a permanent silent no-op, and the submit button froze on "Submitting…" with no network request and no error. All three forms now use the package's default export (the `react-async-script` wrapper that actually loads the script). This has affected every release since 3.0.0. As defence in depth, each form also arms a 15-second timeout after calling `execute()`: if the reCAPTCHA script never loaded, the form resets and surfaces an inline error so the buyer can retry, while a challenge already in progress is never cancelled. No public API change — no new or changed props.
-- **Redesigned the admin preview toolbar** (`FontdueAdminToolbar`) — the collapsed control is now a bottom-centre pill carrying its state in the label (*Preview* / *Previewing hidden fonts* / *Preview expired*), and the panel leads with the *Hidden fonts* switch. The toolbar chrome no longer inherits the host page's font. If you style the toolbar yourself, note the new element class names (`__brand`, `__mark`, `__toggle-text`, `__switch`, `__status`) and that `__dot` is gone; `data-testid="preview-toggle"` is unchanged.
-- `TypeTester` standalone element: comma-separated `axes`, `features` and `features-selected` attributes are now trimmed, so `axes="wght, opsz"` behaves the same as `axes="wght,opsz"` and a trailing comma no longer creates an empty entry (`features="*"` is preserved). Requesting an axis the bound style doesn't expose now logs a console warning naming the axes it does expose, instead of silently rendering no sliders.
-- **Unlocking a password-protected collection no longer slows down the rest of the site for that visitor.** The unlock route enabled Next draft mode with its default site-wide bypass cookie (`Path=/`), so after one unlock *every* page the visitor touched skipped the full-route cache and the data cache and was server-rendered live — seconds per page on content-heavy pages. `NodePasswordForm` now sends the pathname it unlocked on, and the unlock route scopes the bypass cookie to it: only the unlocked collection's pages render dynamically for that visitor, and everything else keeps serving from the static cache. Unlocking several collections yields several path-scoped cookies that coexist. Admin preview is unchanged — its bypass stays site-wide, which is the point of previewing.
+- Fixed checkout, newsletter signup and trial-font downloads hanging forever on reCAPTCHA-enabled foundries. The submit button froze on "Submitting…" with no network request and no error, on every release since 3.0.0. The forms now also give up after 15 seconds and show an inline error if the reCAPTCHA script never loads.
+- Redesigned the admin preview toolbar (`FontdueAdminToolbar`). The collapsed control is a bottom-centre pill carrying its state in the label, the panel leads with the Hidden fonts switch, and the chrome no longer inherits the host page's font. If you style the toolbar yourself, note the new class names (`__brand`, `__mark`, `__toggle-text`, `__switch`, `__status`) and that `__dot` is gone.
+- `TypeTester` standalone element: comma-separated `axes`, `features` and `features-selected` attributes are now trimmed, so `axes="wght, opsz"` behaves the same as `axes="wght,opsz"`. Requesting an axis the bound style doesn't expose logs a warning naming the ones it does, instead of silently rendering no sliders.
+- Unlocking a password-protected collection no longer slows down the rest of the site for that visitor. Every page they touched used to render live instead of from the cache; now only the unlocked collection's pages do.
 
 ## 3.2.0
 
-- **Fixed password-protected collections crashing statically-rendered Next.js storefronts.** Locked slugs are excluded from `generateStaticParams`, so a visitor's first request for one triggers an on-demand static fill of the font page — and the unlock-cookie read during that fill crashed it with a 500 (digest `DYNAMIC_SERVER_USAGE`). A locked page's static fill now renders (and caches) the password form, and unlocking takes that visitor past the static cache instead — the same mechanism as admin preview:
-  - New route handler `fontdue-js/next/unlock`. Mount it in your app (`export { POST } from "fontdue-js/next/unlock"` in `app/api/unlock/route.ts`): on a successful unlock it enables Next draft mode, whose bypass cookie makes that one visitor's renders dynamic, so the unlock cookie is read and the collection resolves. Everyone else keeps the static pages.
-  - New `unlockEndpoint` prop on `NodePasswordForm` — the form POSTs the access token there before reloading. Pass `unlockEndpoint="/api/unlock"` on statically-rendered Next storefronts; omit it on frameworks that render per request (Astro, React Router 7, TanStack Start), where the cookie alone unlocks.
-  - `nodeAccessHeaders()` (`fontdue-js/next`) now reads the unlock cookie only during draft-mode renders, so a locked page's static fill is never flagged dynamic. See [Password-protected collections](https://www.fontdue.com/docs/develop/password-protected-collections).
+- Fixed password-protected collections crashing statically-rendered Next.js storefronts with a 500 on a visitor's first request for a locked page. That page now serves the password form, and unlocking takes the visitor past the static cache:
+  - New route handler `fontdue-js/next/unlock`. Mount it in your app: `export { POST } from "fontdue-js/next/unlock"` in `app/api/unlock/route.ts`.
+  - New `unlockEndpoint` prop on `NodePasswordForm`. Pass `unlockEndpoint="/api/unlock"` on statically-rendered Next storefronts; omit it on frameworks that render per request (Astro, React Router 7, TanStack Start), where the cookie alone unlocks.
+  - See [Password-protected collections](https://www.fontdue.com/docs/develop/password-protected-collections).
 
 ## 3.1.0
 

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<442dcddc69fa11a97e2285e7cb03fe5e>>
+ * @generated SignedSource<<5bd2e4b2c61156f8ffb0e6bacbe9d680>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/CharacterViewerIDQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<442dcddc69fa11a97e2285e7cb03fe5e>>
+ * @generated SignedSource<<5bd2e4b2c61156f8ffb0e6bacbe9d680>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -286,6 +286,36 @@ const node = function () {
                 "storageKey": null
               }],
               "storageKey": null
+            }, {
+              "alias": null,
+              "args": null,
+              "concreteType": "FontFeatures",
+              "kind": "LinkedField",
+              "name": "fontFeatures",
+              "plural": false,
+              "selections": [{
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "supportedFeatures",
+                "storageKey": null
+              }, {
+                "alias": null,
+                "args": null,
+                "concreteType": "FeatureName",
+                "kind": "LinkedField",
+                "name": "featureNames",
+                "plural": true,
+                "selections": [{
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "tag",
+                  "storageKey": null
+                }, v4 /*: any*/],
+                "storageKey": null
+              }],
+              "storageKey": null
             }, v9 /*: any*/, {
               "alias": null,
               "args": null,
@@ -324,12 +354,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "4676c508c8a55490bebba6a27becf7c3",
+      "cacheID": "032db12ccac3e27db6dcd759460f695d",
       "id": null,
       "metadata": {},
       "name": "CharacterViewerIDQuery",
       "operationKind": "query",
-      "text": "query CharacterViewerIDQuery(\n  $collectionId: ID!\n) {\n  node(id: $collectionId) {\n    __typename\n    ...CharacterViewer_collection\n    id\n  }\n}\n\nfragment CharacterViewer_collection on FontCollection {\n  id\n  name\n  isVariableFont\n  collectionType\n  glyphGroups {\n    name\n    characterSets {\n      features\n      characters {\n        __typename\n        ... on CharacterString {\n          string\n        }\n        ... on CharacterRange {\n          first\n          last\n        }\n      }\n    }\n  }\n  featureStyle {\n    ...CharacterViewer_style\n    id\n  }\n  fontStyles {\n    id\n    cssFamily\n    name\n    variableInstances {\n      name\n      coordinates {\n        axis\n        value\n      }\n    }\n  }\n  children(collectionTypes: [FAMILY]) {\n    id\n    name\n    isVariableFont\n    collectionType\n    fontStyles {\n      id\n      cssFamily\n      name\n      variableInstances {\n        name\n        coordinates {\n          axis\n          value\n        }\n      }\n    }\n  }\n}\n\nfragment CharacterViewer_style on FontStyle {\n  ...useFontStyle_fontStyle\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n    name\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    xHeight\n    capHeight\n    lineGap\n  }\n  id\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    avgCharWidth\n  }\n}\n"
+      "text": "query CharacterViewerIDQuery(\n  $collectionId: ID!\n) {\n  node(id: $collectionId) {\n    __typename\n    ...CharacterViewer_collection\n    id\n  }\n}\n\nfragment CharacterViewer_collection on FontCollection {\n  id\n  name\n  isVariableFont\n  collectionType\n  glyphGroups {\n    name\n    characterSets {\n      features\n      characters {\n        __typename\n        ... on CharacterString {\n          string\n        }\n        ... on CharacterRange {\n          first\n          last\n        }\n      }\n    }\n  }\n  featureStyle {\n    ...CharacterViewer_style\n    id\n  }\n  fontStyles {\n    id\n    cssFamily\n    name\n    variableInstances {\n      name\n      coordinates {\n        axis\n        value\n      }\n    }\n  }\n  children(collectionTypes: [FAMILY]) {\n    id\n    name\n    isVariableFont\n    collectionType\n    fontStyles {\n      id\n      cssFamily\n      name\n      variableInstances {\n        name\n        coordinates {\n          axis\n          value\n        }\n      }\n    }\n  }\n}\n\nfragment CharacterViewer_style on FontStyle {\n  ...useFontStyle_fontStyle\n  ...useFeaturesData_fontStyle\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n    name\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    xHeight\n    capHeight\n    lineGap\n  }\n  id\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    featureNames {\n      tag\n      name\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    avgCharWidth\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<5c7df0a34500d9baf3d8f26576d6337c>>
+ * @generated SignedSource<<6dcd669ea9eae985c027da4d029b1d54>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/CharacterViewerSlugQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<5c7df0a34500d9baf3d8f26576d6337c>>
+ * @generated SignedSource<<6dcd669ea9eae985c027da4d029b1d54>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -315,6 +315,36 @@ const node = function () {
                   "storageKey": null
                 }],
                 "storageKey": null
+              }, {
+                "alias": null,
+                "args": null,
+                "concreteType": "FontFeatures",
+                "kind": "LinkedField",
+                "name": "fontFeatures",
+                "plural": false,
+                "selections": [{
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "supportedFeatures",
+                  "storageKey": null
+                }, {
+                  "alias": null,
+                  "args": null,
+                  "concreteType": "FeatureName",
+                  "kind": "LinkedField",
+                  "name": "featureNames",
+                  "plural": true,
+                  "selections": [{
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "tag",
+                    "storageKey": null
+                  }, v3 /*: any*/],
+                  "storageKey": null
+                }],
+                "storageKey": null
               }, v8 /*: any*/, {
                 "alias": null,
                 "args": null,
@@ -354,12 +384,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "f288c10ebaa6fb3da19a93d67ff99291",
+      "cacheID": "a4a373619982126aadb1f76193223680",
       "id": null,
       "metadata": {},
       "name": "CharacterViewerSlugQuery",
       "operationKind": "query",
-      "text": "query CharacterViewerSlugQuery(\n  $collectionSlug: String!\n) {\n  viewer {\n    slug(name: $collectionSlug) {\n      fontCollection {\n        ...CharacterViewer_collection\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment CharacterViewer_collection on FontCollection {\n  id\n  name\n  isVariableFont\n  collectionType\n  glyphGroups {\n    name\n    characterSets {\n      features\n      characters {\n        __typename\n        ... on CharacterString {\n          string\n        }\n        ... on CharacterRange {\n          first\n          last\n        }\n      }\n    }\n  }\n  featureStyle {\n    ...CharacterViewer_style\n    id\n  }\n  fontStyles {\n    id\n    cssFamily\n    name\n    variableInstances {\n      name\n      coordinates {\n        axis\n        value\n      }\n    }\n  }\n  children(collectionTypes: [FAMILY]) {\n    id\n    name\n    isVariableFont\n    collectionType\n    fontStyles {\n      id\n      cssFamily\n      name\n      variableInstances {\n        name\n        coordinates {\n          axis\n          value\n        }\n      }\n    }\n  }\n}\n\nfragment CharacterViewer_style on FontStyle {\n  ...useFontStyle_fontStyle\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n    name\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    xHeight\n    capHeight\n    lineGap\n  }\n  id\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    avgCharWidth\n  }\n}\n"
+      "text": "query CharacterViewerSlugQuery(\n  $collectionSlug: String!\n) {\n  viewer {\n    slug(name: $collectionSlug) {\n      fontCollection {\n        ...CharacterViewer_collection\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment CharacterViewer_collection on FontCollection {\n  id\n  name\n  isVariableFont\n  collectionType\n  glyphGroups {\n    name\n    characterSets {\n      features\n      characters {\n        __typename\n        ... on CharacterString {\n          string\n        }\n        ... on CharacterRange {\n          first\n          last\n        }\n      }\n    }\n  }\n  featureStyle {\n    ...CharacterViewer_style\n    id\n  }\n  fontStyles {\n    id\n    cssFamily\n    name\n    variableInstances {\n      name\n      coordinates {\n        axis\n        value\n      }\n    }\n  }\n  children(collectionTypes: [FAMILY]) {\n    id\n    name\n    isVariableFont\n    collectionType\n    fontStyles {\n      id\n      cssFamily\n      name\n      variableInstances {\n        name\n        coordinates {\n          axis\n          value\n        }\n      }\n    }\n  }\n}\n\nfragment CharacterViewer_style on FontStyle {\n  ...useFontStyle_fontStyle\n  ...useFeaturesData_fontStyle\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n    name\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    xHeight\n    capHeight\n    lineGap\n  }\n  id\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    featureNames {\n      tag\n      name\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    avgCharWidth\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<6e2b13903a03fb5159425b2def155914>>
+ * @generated SignedSource<<ec378d68ce4b4f2ac50bd750f785a55e>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/CharacterViewerStyleRefetchQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<6e2b13903a03fb5159425b2def155914>>
+ * @generated SignedSource<<ec378d68ce4b4f2ac50bd750f785a55e>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -159,6 +159,36 @@ const node = function () {
               "storageKey": null
             }],
             "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "concreteType": "FontFeatures",
+            "kind": "LinkedField",
+            "name": "fontFeatures",
+            "plural": false,
+            "selections": [{
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "supportedFeatures",
+              "storageKey": null
+            }, {
+              "alias": null,
+              "args": null,
+              "concreteType": "FeatureName",
+              "kind": "LinkedField",
+              "name": "featureNames",
+              "plural": true,
+              "selections": [{
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "tag",
+                "storageKey": null
+              }, v2 /*: any*/],
+              "storageKey": null
+            }],
+            "storageKey": null
           }, {
             "alias": null,
             "args": null,
@@ -218,14 +248,14 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "bd9e85f4fe8e9fd45dda4c984e45a908",
+      "cacheID": "9448857ec005ded82f8b54ba87343851",
       "id": null,
       "metadata": {},
       "name": "CharacterViewerStyleRefetchQuery",
       "operationKind": "query",
-      "text": "query CharacterViewerStyleRefetchQuery(\n  $id: ID!\n) {\n  node(id: $id) {\n    __typename\n    ...CharacterViewer_style\n    id\n  }\n}\n\nfragment CharacterViewer_style on FontStyle {\n  ...useFontStyle_fontStyle\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n    name\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    xHeight\n    capHeight\n    lineGap\n  }\n  id\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    avgCharWidth\n  }\n}\n"
+      "text": "query CharacterViewerStyleRefetchQuery(\n  $id: ID!\n) {\n  node(id: $id) {\n    __typename\n    ...CharacterViewer_style\n    id\n  }\n}\n\nfragment CharacterViewer_style on FontStyle {\n  ...useFontStyle_fontStyle\n  ...useFeaturesData_fontStyle\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n    name\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    xHeight\n    capHeight\n    lineGap\n  }\n  id\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    featureNames {\n      tag\n      name\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    avgCharWidth\n  }\n}\n"
     }
   };
 }();
-node.hash = "8cbf3328030930b88b3ec3601aaf7c45";
+node.hash = "087471e544e0a6ed17f1b17cd0570e28";
 export default node;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<a44f8429fa268fcdaadf09a4628fcab1>>
+ * @generated SignedSource<<0da12f5fe3fcb64cb860991d026a732b>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -29,7 +29,7 @@ export type CharacterViewer_style$data = {
         readonly unitsPerEm: number;
         readonly xHeight: number | null;
     };
-    readonly " $fragmentSpreads": FragmentRefs<"useFontStyle_fontStyle">;
+    readonly " $fragmentSpreads": FragmentRefs<"useFeaturesData_fontStyle" | "useFontStyle_fontStyle">;
     readonly " $fragmentType": "CharacterViewer_style";
 };
 export type CharacterViewer_style$key = {

package/dist/__generated__/CharacterViewer_style.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<a44f8429fa268fcdaadf09a4628fcab1>>
+ * @generated SignedSource<<0da12f5fe3fcb64cb860991d026a732b>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -36,6 +36,10 @@ const node = function () {
       "args": null,
       "kind": "FragmentSpread",
       "name": "useFontStyle_fontStyle"
+    }, {
+      "args": null,
+      "kind": "FragmentSpread",
+      "name": "useFeaturesData_fontStyle"
     }, {
       "alias": null,
       "args": null,
@@ -149,5 +153,5 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "8cbf3328030930b88b3ec3601aaf7c45";
+node.hash = "087471e544e0a6ed17f1b17cd0570e28";
 export default node;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f2ab2286dcf091bd52af2d5bc336b434>>
+ * @generated SignedSource<<cdc49b02a41cd8473facbd3d1fec6e92>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/FeatureTesterStandaloneQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f2ab2286dcf091bd52af2d5bc336b434>>
+ * @generated SignedSource<<cdc49b02a41cd8473facbd3d1fec6e92>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -33,6 +33,13 @@ const node = function () {
       "kind": "ScalarField",
       "name": "id",
       "storageKey": null
+    },
+    v3 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
     };
   return {
     "fragment": {
@@ -91,13 +98,7 @@ const node = function () {
             "kind": "ScalarField",
             "name": "cssFamily",
             "storageKey": null
-          }, {
-            "alias": null,
-            "args": null,
-            "kind": "ScalarField",
-            "name": "name",
-            "storageKey": null
-          }, {
+          }, v3 /*: any*/, {
             "alias": null,
             "args": null,
             "concreteType": "WebfontSource",
@@ -179,23 +180,17 @@ const node = function () {
             }, {
               "alias": null,
               "args": null,
-              "concreteType": "StylisticSetName",
+              "concreteType": "FeatureName",
               "kind": "LinkedField",
-              "name": "stylisticSetNames",
+              "name": "featureNames",
               "plural": true,
               "selections": [{
                 "alias": null,
                 "args": null,
                 "kind": "ScalarField",
-                "name": "featureName",
-                "storageKey": null
-              }, {
-                "alias": null,
-                "args": null,
-                "kind": "ScalarField",
-                "name": "humanName",
+                "name": "tag",
                 "storageKey": null
-              }],
+              }, v3 /*: any*/],
               "storageKey": null
             }],
             "storageKey": null
@@ -227,12 +222,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "5982e90168f8a77ba758d70535cbb32a",
+      "cacheID": "e97104d6039557e6c0e1526539906b06",
       "id": null,
       "metadata": {},
       "name": "FeatureTesterStandaloneQuery",
       "operationKind": "query",
-      "text": "query FeatureTesterStandaloneQuery(\n  $familyName: String!\n  $styleName: String!\n) {\n  viewer {\n    fontStyle(familyName: $familyName, styleName: $styleName) {\n      id\n      ...FeatureTesterCard_fontStyle\n    }\n    id\n  }\n}\n\nfragment FeatureTesterCard_fontStyle on FontStyle {\n  ...FontStyle_fontStyle\n  ...useFeaturesData_fontStyle\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\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    avgCharWidth\n  }\n}\n"
+      "text": "query FeatureTesterStandaloneQuery(\n  $familyName: String!\n  $styleName: String!\n) {\n  viewer {\n    fontStyle(familyName: $familyName, styleName: $styleName) {\n      id\n      ...FeatureTesterCard_fontStyle\n    }\n    id\n  }\n}\n\nfragment FeatureTesterCard_fontStyle on FontStyle {\n  ...FontStyle_fontStyle\n  ...useFeaturesData_fontStyle\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    featureNames {\n      tag\n      name\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    avgCharWidth\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<c3ad0b621c332052d7f7324469a05f99>>
+ * @generated SignedSource<<3b299a6976d0bf100eb859d7c11a344c>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/FeatureTestersIdQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<c3ad0b621c332052d7f7324469a05f99>>
+ * @generated SignedSource<<3b299a6976d0bf100eb859d7c11a344c>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -25,6 +25,13 @@ const node = function () {
       "kind": "ScalarField",
       "name": "id",
       "storageKey": null
+    },
+    v3 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
     };
   return {
     "fragment": {
@@ -190,13 +197,7 @@ const node = function () {
                 "kind": "ScalarField",
                 "name": "cssFamily",
                 "storageKey": null
-              }, {
-                "alias": null,
-                "args": null,
-                "kind": "ScalarField",
-                "name": "name",
-                "storageKey": null
-              }, {
+              }, v3 /*: any*/, {
                 "alias": null,
                 "args": null,
                 "concreteType": "WebfontSource",
@@ -278,23 +279,17 @@ const node = function () {
                 }, {
                   "alias": null,
                   "args": null,
-                  "concreteType": "StylisticSetName",
+                  "concreteType": "FeatureName",
                   "kind": "LinkedField",
-                  "name": "stylisticSetNames",
+                  "name": "featureNames",
                   "plural": true,
                   "selections": [{
                     "alias": null,
                     "args": null,
                     "kind": "ScalarField",
-                    "name": "featureName",
-                    "storageKey": null
-                  }, {
-                    "alias": null,
-                    "args": null,
-                    "kind": "ScalarField",
-                    "name": "humanName",
+                    "name": "tag",
                     "storageKey": null
-                  }],
+                  }, v3 /*: any*/],
                   "storageKey": null
                 }],
                 "storageKey": null
@@ -331,12 +326,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "2766d928cb71f0b48c390f985625920e",
+      "cacheID": "ca34a54862281e0bc708f27b1e97720e",
       "id": null,
       "metadata": {},
       "name": "FeatureTestersIdQuery",
       "operationKind": "query",
-      "text": "query FeatureTestersIdQuery(\n  $id: ID!\n) {\n  node(id: $id) {\n    __typename\n    ... on FontCollection {\n      ...FeatureTesters_collection\n    }\n    id\n  }\n}\n\nfragment FeatureTesterCard_fontStyle on FontStyle {\n  ...FontStyle_fontStyle\n  ...useFeaturesData_fontStyle\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n  }\n}\n\nfragment FeatureTesters_collection on FontCollection {\n  featureTesterDefaultOn\n  featureTesterShowTag\n  featureTesters {\n    id\n    feature\n    label\n    content\n    size\n    lineHeight\n    alignment\n    autofit\n    changedRanges {\n      start\n      length\n    }\n    variableSettings {\n      axis\n      value\n    }\n    fontStyle {\n      ...FeatureTesterCard_fontStyle\n      id\n    }\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\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    avgCharWidth\n  }\n}\n"
+      "text": "query FeatureTestersIdQuery(\n  $id: ID!\n) {\n  node(id: $id) {\n    __typename\n    ... on FontCollection {\n      ...FeatureTesters_collection\n    }\n    id\n  }\n}\n\nfragment FeatureTesterCard_fontStyle on FontStyle {\n  ...FontStyle_fontStyle\n  ...useFeaturesData_fontStyle\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n  }\n}\n\nfragment FeatureTesters_collection on FontCollection {\n  featureTesterDefaultOn\n  featureTesterShowTag\n  featureTesters {\n    id\n    feature\n    label\n    content\n    size\n    lineHeight\n    alignment\n    autofit\n    changedRanges {\n      start\n      length\n    }\n    variableSettings {\n      axis\n      value\n    }\n    fontStyle {\n      ...FeatureTesterCard_fontStyle\n      id\n    }\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    featureNames {\n      tag\n      name\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    avgCharWidth\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<45eb26181270bd20d481b2729350270f>>
+ * @generated SignedSource<<d0ea0583e639afe74556c1f582bf7066>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/FeatureTestersSlugQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<45eb26181270bd20d481b2729350270f>>
+ * @generated SignedSource<<d0ea0583e639afe74556c1f582bf7066>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -25,6 +25,13 @@ const node = function () {
       "kind": "ScalarField",
       "name": "id",
       "storageKey": null
+    },
+    v3 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
     };
   return {
     "fragment": {
@@ -209,13 +216,7 @@ const node = function () {
                   "kind": "ScalarField",
                   "name": "cssFamily",
                   "storageKey": null
-                }, {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "name",
-                  "storageKey": null
-                }, {
+                }, v3 /*: any*/, {
                   "alias": null,
                   "args": null,
                   "concreteType": "WebfontSource",
@@ -297,23 +298,17 @@ const node = function () {
                   }, {
                     "alias": null,
                     "args": null,
-                    "concreteType": "StylisticSetName",
+                    "concreteType": "FeatureName",
                     "kind": "LinkedField",
-                    "name": "stylisticSetNames",
+                    "name": "featureNames",
                     "plural": true,
                     "selections": [{
                       "alias": null,
                       "args": null,
                       "kind": "ScalarField",
-                      "name": "featureName",
-                      "storageKey": null
-                    }, {
-                      "alias": null,
-                      "args": null,
-                      "kind": "ScalarField",
-                      "name": "humanName",
+                      "name": "tag",
                       "storageKey": null
-                    }],
+                    }, v3 /*: any*/],
                     "storageKey": null
                   }],
                   "storageKey": null
@@ -351,12 +346,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "2cba5cdcd88e591ea9cb602a16833af7",
+      "cacheID": "218c28c9cb4f3d21994a653097625842",
       "id": null,
       "metadata": {},
       "name": "FeatureTestersSlugQuery",
       "operationKind": "query",
-      "text": "query FeatureTestersSlugQuery(\n  $slug: String!\n) {\n  viewer {\n    slug(name: $slug) {\n      fontCollection {\n        ...FeatureTesters_collection\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment FeatureTesterCard_fontStyle on FontStyle {\n  ...FontStyle_fontStyle\n  ...useFeaturesData_fontStyle\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n  }\n}\n\nfragment FeatureTesters_collection on FontCollection {\n  featureTesterDefaultOn\n  featureTesterShowTag\n  featureTesters {\n    id\n    feature\n    label\n    content\n    size\n    lineHeight\n    alignment\n    autofit\n    changedRanges {\n      start\n      length\n    }\n    variableSettings {\n      axis\n      value\n    }\n    fontStyle {\n      ...FeatureTesterCard_fontStyle\n      id\n    }\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\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    avgCharWidth\n  }\n}\n"
+      "text": "query FeatureTestersSlugQuery(\n  $slug: String!\n) {\n  viewer {\n    slug(name: $slug) {\n      fontCollection {\n        ...FeatureTesters_collection\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment FeatureTesterCard_fontStyle on FontStyle {\n  ...FontStyle_fontStyle\n  ...useFeaturesData_fontStyle\n  cssFamily\n  name\n  glyphNames {\n    characters\n    features\n  }\n}\n\nfragment FeatureTesters_collection on FontCollection {\n  featureTesterDefaultOn\n  featureTesterShowTag\n  featureTesters {\n    id\n    feature\n    label\n    content\n    size\n    lineHeight\n    alignment\n    autofit\n    changedRanges {\n      start\n      length\n    }\n    variableSettings {\n      axis\n      value\n    }\n    fontStyle {\n      ...FeatureTesterCard_fontStyle\n      id\n    }\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    featureNames {\n      tag\n      name\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    avgCharWidth\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<642da79d6304c9a0bba1e98cb8b9b3fe>>
+ * @generated SignedSource<<d8894237f25f4e65144d657d3687ab7c>>
  * @lightSyntaxTransform
  * @nogrep
  */