fontdue-js 3.10.0 → 3.11.0

package/CHANGELOG.md

@@ -1,12 +1,20 @@
+## 3.11.0
+
+- `TestFontsForm` can group its family checkboxes by superfamily. With *Family list* set to *Grouped by superfamily* under *Settings → Test fonts* – or `testFonts: { familyGrouping: "superfamily" }` in the config, or the `familyGrouping` prop (`family-grouping` on `<fontdue-test-fonts-form>`) – each superfamily gets a checkbox that ticks all of its families, listed beneath it in `.test-fonts__family-group__families`.
+
+## 3.10.1
+
+- Fixed the `TypeTester`, `FeatureTesters`, `CharacterViewer` and `StoreModal` never rendering a font in some Safari versions when its family or style name contains punctuation, such as an apostrophe, or starts with a digit.
+
 ## 3.10.0
 
 - The `StoreModal`’s browse page leaves out an unlisted family, and lists an unlisted superfamily’s families in its place, each opening the superfamily’s page. Unlisted font packs are left out of the browse page too.
 - Checkboxes are 20px by default, down from 40px on the `TestFontsForm`, `NewsletterSignup` and license agreement checkboxes. Set `--checkbox-size: 40px` and `--checkbox-margin: 20px` to keep the larger box.
-- Fixed a type tester with a `truncate` line cap cutting through a line, or showing one line too few, in Safari before 26.1. The checkbox size and this fix ship as stylesheet rules, so take `dist/fontdue.css` from this version alongside the JS.
+- Fixed a type tester with a `truncate` line cap cutting through a line, or showing one line too few, in Safari before 26.1.
 
 ## 3.9.0
 
-- `TestFontsForm` can let the visitor choose which families to download. With *Customer’s choice* set under *Settings → Test fonts* – or `testFonts: { familySelection: "choice" }` in the config, or the `familySelection` prop (`family-selection` on `<fontdue-test-fonts-form>`) – the form lists the families with a checkbox each plus *Select all*, and the download holds only the ticked ones. Ships new stylesheet rules, so take `dist/fontdue.css` from this version alongside the JS.
+- `TestFontsForm` can let the visitor choose which families to download. With *Customer’s choice* set under *Settings → Test fonts* – or `testFonts: { familySelection: "choice" }` in the config, or the `familySelection` prop (`family-selection` on `<fontdue-test-fonts-form>`) – the form lists the families with a checkbox each plus *Select all*, and the download holds only the ticked ones.
 - `TestFontsForm` takes `collectionSlug` or `collectionId` (`collection-slug` / `collection-id`, comma-separated for several) to offer just those families, with no checkboxes – for a form on a family’s own page. When preloading, pass the same value to `loadTestFontsFormQuery({ collectionSlug })`; the old options-only call still works.
 
 ## 3.8.0
@@ -29,7 +37,7 @@
 - A product route takes a collection's slug as well as its ID, so `?store=product/example-sans` works alongside the base64 form. `fontdue-store-route="product/<slug>"` takes a slug now too – previously a slug there either did nothing (if it contained a hyphen) or loaded a broken product page.
 - `TypeTester` and `TypeTesters` take a `truncate` prop, and `<fontdue-type-tester>` and `<fontdue-type-testers>` take a `truncate` attribute, so each tester can cap its paragraph at its own number of lines instead of every tester on a site sharing one value. A per-tester value overrides the `truncate` UI config.
 - Fixed a type tester leaving a blank gap where its variable-axis sliders would go, on a static style or when none of the requested axes are in the font. The toolbar, features panel and dropdown placements were all affected.
-- A numeric `truncate` cap now stays in place while a visitor edits the text, instead of the paragraph jumping to full height on click and back on blur. `truncate: true` is unchanged and still opens to the full paragraph when clicked; pass `{ lines: 20, expandOnFocus: true }` if you want a line count to behave the old way. On the custom elements that object is a second word in the attribute – `truncate="20 expandable"`, or `truncate="20 fixed"` to spell out the default. Ships new stylesheet rules, so take `dist/fontdue.css` from this version alongside the JS.
+- A numeric `truncate` cap now stays in place while a visitor edits the text, instead of the paragraph jumping to full height on click and back on blur. `truncate: true` is unchanged and still opens to the full paragraph when clicked; pass `{ lines: 20, expandOnFocus: true }` if you want a line count to behave the old way. On the custom elements that object is a second word in the attribute – `truncate="20 expandable"`, or `truncate="20 fixed"` to spell out the default.
 - Fixed a type tester opening at a size outside the range its size slider spans. A seeded size below `typeTester.size.min` (or above `max`) rendered at that size with the slider handle drawn off the end of its track; it is clamped into range now.
 - `NewsletterSignup` and `TestFontsForm` now name which form a submission came from, so Fontdue records each as its own event rather than as a checkout contact step.
 - Fixed the Store Modal’s Checkout button doing nothing on a store using Stripe Tax, and the Cart’s Next button on the billing and licensee steps. Stripe.js now throws “Unable to select session” when asked to validate a form that has no payment in it yet; the address fields are validated on their own in that case, with the same inline errors.
@@ -47,7 +55,7 @@
 ## 3.4.1
 
 - Fixed the standalone type tester dropping an axis slider when its `variable-settings` starting value is negative. `variable-settings="slnt -11"` was rejected as unparseable, so no slant slider appeared and nothing in the markup explained why. Any axis with a negative range was affected. Extra spaces between an axis and its value are tolerated now too.
-- Fixed the `FeatureTesters` switch knob rendering stretched in Safari 18 and earlier. The fix is in `dist/fontdue.css`.
+- Fixed the `FeatureTesters` switch knob rendering stretched in Safari 18 and earlier.
 
 ## 3.4.0
 
@@ -74,7 +82,7 @@
 
 ## 3.2.3
 
-- 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.
+- 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.
 - 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

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<47f718aeae16846330759690c693dce6>>
+ * @generated SignedSource<<0a0e4ebec2aeeb79d7f6e04437e7b7cc>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -12,6 +12,7 @@ export type TestFontsForm_Query$data = {
     readonly viewer: {
         readonly fontdueConfig: {
             readonly testFonts: {
+                readonly familyGrouping: string;
                 readonly familySelection: string;
             };
         } | null;
@@ -26,6 +27,10 @@ export type TestFontsForm_Query$data = {
             readonly families: ReadonlyArray<{
                 readonly id: string;
                 readonly name: string;
+                readonly parent: {
+                    readonly id: string;
+                    readonly name: string;
+                } | null;
             }>;
         } | null;
     };

package/dist/__generated__/TestFontsForm_Query.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<47f718aeae16846330759690c693dce6>>
+ * @generated SignedSource<<0a0e4ebec2aeeb79d7f6e04437e7b7cc>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -77,6 +77,12 @@ const node = function () {
           "kind": "ScalarField",
           "name": "familySelection",
           "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "familyGrouping",
+          "storageKey": null
         }],
         "storageKey": null
       }],
@@ -90,6 +96,13 @@ const node = function () {
       "storageKey": null
     },
     v5 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    v6 = {
       "alias": null,
       "args": [{
         "kind": "Variable",
@@ -117,11 +130,14 @@ const node = function () {
         "kind": "LinkedField",
         "name": "families",
         "plural": true,
-        "selections": [v4 /*: any*/, {
+        "selections": [v4 /*: any*/, v5 /*: any*/, {
           "alias": null,
           "args": null,
-          "kind": "ScalarField",
-          "name": "name",
+          "concreteType": "FontCollection",
+          "kind": "LinkedField",
+          "name": "parent",
+          "plural": false,
+          "selections": [v4 /*: any*/, v5 /*: any*/],
           "storageKey": null
         }],
         "storageKey": null
@@ -141,7 +157,7 @@ const node = function () {
         "kind": "LinkedField",
         "name": "viewer",
         "plural": false,
-        "selections": [v2 /*: any*/, v3 /*: any*/, v5 /*: any*/],
+        "selections": [v2 /*: any*/, v3 /*: any*/, v6 /*: any*/],
         "storageKey": null
       }],
       "type": "RootQueryType",
@@ -159,19 +175,19 @@ const node = function () {
         "kind": "LinkedField",
         "name": "viewer",
         "plural": false,
-        "selections": [v2 /*: any*/, v3 /*: any*/, v5 /*: any*/, v4 /*: any*/],
+        "selections": [v2 /*: any*/, v3 /*: any*/, v6 /*: any*/, v4 /*: any*/],
         "storageKey": null
       }]
     },
     "params": {
-      "cacheID": "42a58842afe113b89a0bc969738246a8",
+      "cacheID": "f0d8dba45eec4868101fe71af251133a",
       "id": null,
       "metadata": {},
       "name": "TestFontsForm_Query",
       "operationKind": "query",
-      "text": "query TestFontsForm_Query(\n  $collectionIds: [ID!]\n  $collectionSlugs: [String!]\n) {\n  viewer {\n    settings {\n      eulaAgreementLabel(format: HTML)\n      newsletterOptInLabel(format: HTML)\n      recaptchaEnabled\n      recaptchaSiteKey\n    }\n    fontdueConfig {\n      testFonts {\n        familySelection\n      }\n    }\n    testFonts(collectionIds: $collectionIds, collectionSlugs: $collectionSlugs) {\n      archiveUrl\n      families {\n        id\n        name\n      }\n    }\n    id\n  }\n}\n"
+      "text": "query TestFontsForm_Query(\n  $collectionIds: [ID!]\n  $collectionSlugs: [String!]\n) {\n  viewer {\n    settings {\n      eulaAgreementLabel(format: HTML)\n      newsletterOptInLabel(format: HTML)\n      recaptchaEnabled\n      recaptchaSiteKey\n    }\n    fontdueConfig {\n      testFonts {\n        familySelection\n        familyGrouping\n      }\n    }\n    testFonts(collectionIds: $collectionIds, collectionSlugs: $collectionSlugs) {\n      archiveUrl\n      families {\n        id\n        name\n        parent {\n          id\n          name\n        }\n      }\n    }\n    id\n  }\n}\n"
     }
   };
 }();
-node.hash = "da75e312a602ac0ee2dfb79271299c77";
+node.hash = "9ef2c42a7043469fec07a31649623766";
 export default node;

package/dist/__tests__/fontLoader.test.js

@@ -1,5 +1,37 @@
 import { describe, it, expect } from 'vitest';
-import { selectFontSource } from "../fontLoader.js";
+import { selectFontSource, fontStyleFamily } from "../fontLoader.js";
+describe('fontStyleFamily', () => {
+  it('joins family and style unchanged when both are plain identifiers', () => {
+    expect(fontStyleFamily('Vain', 'Regular')).toBe('Vain Regular');
+    expect(fontStyleFamily('Sweet Lily', 'Bold Italic')).toBe('Sweet Lily Bold Italic');
+  });
+  it("escapes an apostrophe, which some Safari builds reject in a FontFace family", () => {
+    expect(fontStyleFamily("Hell's Gate", 'fairypools')).toBe('Hell_27s Gate fairypools');
+  });
+  it('escapes other ASCII punctuation instead of dropping it, so names stay distinct', () => {
+    expect(fontStyleFamily('A&B', 'Regular')).toBe('A_26B Regular');
+    expect(fontStyleFamily('A "B"', 'Regular')).toBe('A _22B_22 Regular');
+    expect(fontStyleFamily("Hell's Gate", 'Regular')).not.toBe(fontStyleFamily('Hells Gate', 'Regular'));
+  });
+  it('prefixes words CSS cannot parse unquoted: leading digits and reserved words', () => {
+    expect(fontStyleFamily('0712', 'Regular')).toBe('_0712 Regular');
+    expect(fontStyleFamily('Grotesk', '-5 Light')).toBe('Grotesk _-5 Light');
+    expect(fontStyleFamily('Initial', 'Bold')).toBe('_Initial Bold');
+    expect(fontStyleFamily('Default', 'Regular')).toBe('_Default Regular');
+  });
+  it('keeps non-ASCII letters, hyphens and underscores, and collapses whitespace', () => {
+    expect(fontStyleFamily('Généreuse  Sans', 'Extra-Bold_2')).toBe('Généreuse Sans Extra-Bold_2');
+    expect(fontStyleFamily(' 游明朝 ', ' W3 ')).toBe('游明朝 W3');
+  });
+  it('only yields CSS identifiers', () => {
+    const names = [fontStyleFamily("Hell's Gate", 'fairypools'), fontStyleFamily('0712', '1'), fontStyleFamily('(Test) / 50%', 'Regular!'), fontStyleFamily('--x', 'y')];
+    for (const name of names) {
+      for (const word of name.split(' ')) {
+        expect(word).toMatch(/^(?:[A-Za-z_\u0080-￿]|-[A-Za-z_\u0080-￿])[\w\u0080-￿-]*$/);
+      }
+    }
+  });
+});
 describe('selectFontSource', () => {
   const woff2 = function () {
     let extra = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/dist/__tests__/testFontsFamilyChoice.test.js

@@ -51,6 +51,7 @@ const families = [{
 }];
 const viewer = function (familySelection) {
   let list = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : families;
+  let familyGrouping = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'flat';
   return {
     viewer: {
       settings: {
@@ -61,7 +62,8 @@ const viewer = function (familySelection) {
       },
       fontdueConfig: {
         testFonts: {
-          familySelection
+          familySelection,
+          familyGrouping
         }
       },
       testFonts: {
@@ -147,4 +149,75 @@ describe('TestFontsForm family choice', () => {
     expect(container.querySelector('form')).toBeNull();
     expect(container.textContent).toContain('Test fonts aren’t available for this family.');
   });
+});
+describe('TestFontsForm family grouping', () => {
+  const sans = {
+    id: 'U3VwZXI6MQ==',
+    name: 'Example'
+  };
+  const grouped = [{
+    id: 'RmFtaWx5OjE=',
+    name: 'Example Sans',
+    parent: sans
+  }, {
+    id: 'RmFtaWx5OjI=',
+    name: 'Solo',
+    parent: null
+  }, {
+    id: 'RmFtaWx5OjM=',
+    name: 'Example Serif',
+    parent: sans
+  },
+  // The only family offered from its superfamily: listed on its own.
+  {
+    id: 'RmFtaWx5OjQ=',
+    name: 'Lonely',
+    parent: {
+      id: 'U3VwZXI6Mg==',
+      name: 'Lonely Super'
+    }
+  }];
+  const superfamilyBoxes = () => [...container.querySelectorAll('.test-fonts__superfamily input')];
+  it('lists the families flat by default', () => {
+    queryRef.data = viewer('choice', grouped);
+    render();
+    expect(superfamilyBoxes()).toHaveLength(0);
+    expect(familyCheckboxes().map(box => box.value)).toEqual(grouped.map(f => f.id));
+  });
+  it('groups families under their superfamily, which ticks them all', () => {
+    queryRef.data = viewer('choice', grouped, 'superfamily');
+    render();
+    expect(superfamilyBoxes()).toHaveLength(1);
+    const group = container.querySelector('.test-fonts__family-group');
+    expect(group.textContent).toContain('Example');
+    expect([...group.querySelectorAll('.test-fonts__family input')].map(b => b.value)).toEqual(['RmFtaWx5OjE=', 'RmFtaWx5OjM=']);
+    // The group sits where its first family fell; the rest keep their order.
+    expect(familyCheckboxes().map(box => box.value)).toEqual(['RmFtaWx5OjE=', 'RmFtaWx5OjM=', 'RmFtaWx5OjI=', 'RmFtaWx5OjQ=']);
+    expect(container.textContent).not.toContain('Lonely Super');
+    act(() => superfamilyBoxes()[0].click());
+    expect(hiddenIds()).toEqual(['RmFtaWx5OjE=', 'RmFtaWx5OjM=']);
+    expect(superfamilyBoxes()[0].checked).toBe(true);
+
+    // Unticking one family leaves the superfamily unticked.
+    act(() => familyCheckboxes()[1].click());
+    expect(hiddenIds()).toEqual(['RmFtaWx5OjE=']);
+    expect(superfamilyBoxes()[0].checked).toBe(false);
+    act(() => superfamilyBoxes()[0].click());
+    act(() => superfamilyBoxes()[0].click());
+    expect(hiddenIds()).toEqual([]);
+  });
+  it('lets the prop and code config override the dashboard grouping', () => {
+    queryRef.data = viewer('choice', grouped, 'superfamily');
+    render({}, {
+      testFonts: {
+        familyGrouping: 'flat'
+      }
+    });
+    expect(superfamilyBoxes()).toHaveLength(0);
+    queryRef.data = viewer('choice', grouped);
+    render({
+      familyGrouping: 'superfamily'
+    });
+    expect(superfamilyBoxes()).toHaveLength(1);
+  });
 });

package/dist/components/ConfigContext.d.ts

@@ -29,8 +29,10 @@ interface PreviewConfig {
     clientSide?: boolean;
 }
 export type TestFontsFamilySelection = 'all' | 'choice';
+export type TestFontsFamilyGrouping = 'flat' | 'superfamily';
 interface TestFontsConfig {
     familySelection?: TestFontsFamilySelection;
+    familyGrouping?: TestFontsFamilyGrouping;
 }
 export interface Config {
     form?: FormConfig;
@@ -101,6 +103,7 @@ export declare const makeConfig: (config?: Config) => {
     };
     testFonts: {
         familySelection: TestFontsFamilySelection | undefined;
+        familyGrouping: TestFontsFamilyGrouping | undefined;
     };
     storeModal: {
         indexLayout: "styled-aa" | "styled-font-names";
@@ -182,6 +185,7 @@ declare const _default: React.Context<{
     };
     testFonts: {
         familySelection: TestFontsFamilySelection | undefined;
+        familyGrouping: TestFontsFamilyGrouping | undefined;
     };
     storeModal: {
         indexLayout: "styled-aa" | "styled-font-names";

package/dist/components/ConfigContext.js

@@ -88,7 +88,7 @@ export const mergeConfig = (base, override) => {
   return deepMerge(base, override);
 };
 export const makeConfig = config => {
-  var _config$form, _config$testFonts, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4, _config$preview, _config$preview2, _config$preview3;
+  var _config$form, _config$testFonts, _config$testFonts2, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4, _config$preview, _config$preview2, _config$preview3;
   return {
     typeTester: makeTypeTesterConfig(config === null || config === void 0 ? void 0 : config.typeTester),
     form: {
@@ -98,7 +98,8 @@ export const makeConfig = config => {
       // Deliberately no default: the form falls back to the dashboard setting
       // it reads in its own query (the npm path never merges server config
       // into `children`'s context – see ServerConfigProvider).
-      familySelection: config === null || config === void 0 ? void 0 : (_config$testFonts = config.testFonts) === null || _config$testFonts === void 0 ? void 0 : _config$testFonts.familySelection
+      familySelection: config === null || config === void 0 ? void 0 : (_config$testFonts = config.testFonts) === null || _config$testFonts === void 0 ? void 0 : _config$testFonts.familySelection,
+      familyGrouping: config === null || config === void 0 ? void 0 : (_config$testFonts2 = config.testFonts) === null || _config$testFonts2 === void 0 ? void 0 : _config$testFonts2.familyGrouping
     },
     storeModal: {
       indexLayout: (config === null || config === void 0 ? void 0 : (_config$storeModal = config.storeModal) === null || _config$storeModal === void 0 ? void 0 : _config$storeModal.indexLayout) ?? 'styled-aa',

package/dist/components/FeatureTester/FeatureTesterCard.js

@@ -7,6 +7,7 @@ import { graphql, useFragment } from 'react-relay';
 import FontStyle from '../FontStyle/index.js';
 import useFeaturesData from '../TypeTester/useFeaturesData.js';
 import useFeatureTesterAutofit from '../../hooks/useFeatureTesterAutofit.js';
+import { fontStyleFamily } from '../../fontLoader.js';
 import { sensitiveStringsForFeature, computeSensitivityFlags, segmentByFlags } from './highlight.js';
 const fragment = (_FeatureTesterCard_fontStyle.hash && _FeatureTesterCard_fontStyle.hash !== "687d8afca93d615ed0794f963702d082" && console.error("The definition of 'FeatureTesterCard_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FeatureTesterCard_fontStyle);
 export default function FeatureTesterCard(_ref) {
@@ -88,7 +89,7 @@ export default function FeatureTesterCard(_ref) {
   } = useFeatureTesterAutofit({
     enabled: autofit,
     text: content,
-    fontFamily: `${data.cssFamily} ${data.name}`,
+    fontFamily: fontStyleFamily(data.cssFamily, data.name),
     feature,
     fontSize: fontSize ?? 72,
     letterSpacing: letterSpacing ?? 0,

package/dist/components/StoreModal/StoreModalContainer.js

@@ -6,6 +6,7 @@ import { useLazyLoadQuery, graphql } from 'react-relay';
 import StoreModalCheckoutContext from './StoreModalCheckoutContext.js';
 import CheckoutSteps from '../Cart/CheckoutSteps.js';
 import useFontStyle from '../useFontStyle.js';
+import { fontStyleFamily } from '../../fontLoader.js';
 import StoreModalLoadingScreen from '../elements/StoreModalLoadingScreen/index.js';
 import ConfigContext from '../ConfigContext.js';
 const getPageTitle = name => {
@@ -89,8 +90,8 @@ const StoreModalContainer = _ref => {
   };
   const [checkoutStep, setCheckoutStep] = useState(CheckoutSteps.Customer);
   const [checkoutError, setCheckoutError] = useState(null);
-  const regularName = uiFontStyle ? `${uiFontStyle.cssFamily} ${uiFontStyle.name}` : null;
-  const boldName = uiFontStyleBold ? `${uiFontStyleBold.cssFamily} ${uiFontStyleBold.name}` : null;
+  const regularName = uiFontStyle ? fontStyleFamily(uiFontStyle.cssFamily, uiFontStyle.name) : null;
+  const boldName = uiFontStyleBold ? fontStyleFamily(uiFontStyleBold.cssFamily, uiFontStyleBold.name) : null;
   return /*#__PURE__*/React.createElement(StoreModalCheckoutContext.Provider, {
     value: {
       checkoutStep,

package/dist/components/TestFontsForm/TestFontsFormElement.d.ts

@@ -6,6 +6,7 @@ interface TestFontsFormElement_props {
     collectionId?: string;
     collectionSlug?: string;
     familySelection?: string;
+    familyGrouping?: string;
 }
-declare const TestFontsFormElement: ({ familySelection, ...props }: TestFontsFormElement_props) => React.JSX.Element;
+declare const TestFontsFormElement: ({ familySelection, familyGrouping, ...props }: TestFontsFormElement_props) => React.JSX.Element;
 export default TestFontsFormElement;

package/dist/components/TestFontsForm/TestFontsFormElement.js

@@ -2,12 +2,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import TestFontsFormFetcher from './index.js';
 const FAMILY_SELECTIONS = ['all', 'choice'];
+const FAMILY_GROUPINGS = ['flat', 'superfamily'];
 const TestFontsFormElement = _ref => {
   let {
     familySelection,
+    familyGrouping,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement(TestFontsFormFetcher, _extends({}, props, {
+    familyGrouping: familyGrouping && FAMILY_GROUPINGS.includes(familyGrouping) ? familyGrouping : undefined,
     familySelection: familySelection && FAMILY_SELECTIONS.includes(familySelection) ? familySelection : undefined,
     newsletterCheckboxChecked: props.newsletterCheckboxChecked === 'true' ? true : false
   }));

package/dist/components/TestFontsForm/familyGroups.d.ts

@@ -0,0 +1,16 @@
+import { TestFontsFamilyGrouping } from '../ConfigContext.js';
+interface Superfamily {
+    readonly id: string;
+    readonly name: string | null | undefined;
+}
+export interface TestFontsFamily {
+    readonly id: string;
+    readonly name: string | null | undefined;
+    readonly parent?: Superfamily | null;
+}
+export interface FamilyGroup<Family extends TestFontsFamily> {
+    superfamily: Superfamily | null;
+    families: Family[];
+}
+export declare function groupFamilies<Family extends TestFontsFamily>(families: readonly Family[], grouping: TestFontsFamilyGrouping): FamilyGroup<Family>[];
+export {};

package/dist/components/TestFontsForm/familyGroups.js

@@ -0,0 +1,34 @@
+// One row of the family checkboxes: a lone family (`superfamily` null), or a
+// superfamily with its families nested beneath it.
+
+// Lays the families out for the form's checkboxes, keeping their order: flat
+// lists each family on its own; 'superfamily' gathers families under their
+// superfamily, placed where its first family falls. A superfamily with only one
+// family to offer adds nothing over that family, so the family stands alone.
+export function groupFamilies(families, grouping) {
+  const alone = family => ({
+    superfamily: null,
+    families: [family]
+  });
+  if (grouping !== 'superfamily') return families.map(alone);
+  const groups = [];
+  const bySuperfamily = new Map();
+  for (const family of families) {
+    const superfamily = family.parent;
+    if (!superfamily) {
+      groups.push(alone(family));
+      continue;
+    }
+    let group = bySuperfamily.get(superfamily.id);
+    if (!group) {
+      group = {
+        superfamily,
+        families: []
+      };
+      bySuperfamily.set(superfamily.id, group);
+      groups.push(group);
+    }
+    group.families.push(family);
+  }
+  return groups.map(group => group.families.length > 1 ? group : alone(group.families[0]));
+}

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import { TestFontsForm_Query } from '../../__generated__/TestFontsForm_Query.graphql.js';
 import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
-import { Config, TestFontsFamilySelection } from '../ConfigContext.js';
+import { Config, TestFontsFamilyGrouping, TestFontsFamilySelection } from '../ConfigContext.js';
 import { TestFontsFormCollectionProps } from './variables.js';
 export interface TestFontsForm_props extends TestFontsFormCollectionProps {
     agreementLabel?: string;
     downloadLabel?: string;
     newsletterCheckboxChecked?: boolean;
     familySelection?: TestFontsFamilySelection;
+    familyGrouping?: TestFontsFamilyGrouping;
 }
 export type TestFontsFormPreloadedQuery = SerializablePreloadedQuery<TestFontsForm_Query>;
 export type LoadTestFontsFormQueryVariables = TestFontsFormCollectionProps;

package/dist/components/TestFontsForm/index.js

@@ -18,6 +18,7 @@ import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQ
 import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
 import ConfigContext from '../ConfigContext.js';
 import { testFontsFormQueryVariables } from './variables.js';
+import { groupFamilies } from './familyGroups.js';
 import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 const updateCustomerMutation = (_TestFontsFormUpdateCustomerMutation.hash && _TestFontsFormUpdateCustomerMutation.hash !== "ba56958399f0893bd667ff02c33a6975" && console.error("The definition of 'TestFontsFormUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsFormUpdateCustomerMutation);
 // The archive endpoint's family filter: `collection_ids[]` narrows the ZIP to
@@ -41,7 +42,7 @@ const TestFontsDownloading = _ref => {
   }, "here"), ".")));
 };
 const TestFontsFormComponent = _ref2 => {
-  var _data$viewer$testFont, _data$viewer$fontdueC, _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont2;
+  var _data$viewer$testFont, _data$viewer$fontdueC, _data$viewer$fontdueC2, _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont2;
   let {
     data,
     agreementLabel,
@@ -49,7 +50,8 @@ const TestFontsFormComponent = _ref2 => {
     newsletterCheckboxChecked = false,
     collectionId,
     collectionSlug,
-    familySelection: familySelectionProp
+    familySelection: familySelectionProp,
+    familyGrouping: familyGroupingProp
   } = _ref2;
   const [email, setEmail] = useState('');
   const [name, setName] = useState('');
@@ -82,11 +84,30 @@ const TestFontsFormComponent = _ref2 => {
   // This form's prop, then code config (which, on the script-tag path, already
   // has the dashboard setting merged beneath it), then the dashboard setting.
   const familySelection = familySelectionProp ?? config.testFonts.familySelection ?? ((_data$viewer$fontdueC = data.viewer.fontdueConfig) === null || _data$viewer$fontdueC === void 0 ? void 0 : _data$viewer$fontdueC.testFonts.familySelection) ?? 'all';
+  // Resolved the same way as the family selection.
+  const familyGrouping = familyGroupingProp ?? config.testFonts.familyGrouping ?? ((_data$viewer$fontdueC2 = data.viewer.fontdueConfig) === null || _data$viewer$fontdueC2 === void 0 ? void 0 : _data$viewer$fontdueC2.testFonts.familyGrouping) ?? 'flat';
   // One family leaves nothing to choose.
   const choosing = !limited && familySelection === 'choice' && families.length > 1;
   const downloadIds = limited ? families.map(family => family.id) : choosing ? families.map(family => family.id).filter(id => chosenIds.includes(id)) : [];
-  const toggleFamily = (id, checked) => setChosenIds(ids => checked ? [...ids, id] : ids.filter(other => other !== id));
-  const allChosen = families.every(family => chosenIds.includes(family.id));
+
+  // Ticks or unticks families – one, or a superfamily's.
+  const toggleFamilies = (toggled, checked) => setChosenIds(ids => [...ids.filter(id => !toggled.includes(id)), ...(checked ? toggled : [])]);
+  const allChosen = list => list.every(family => chosenIds.includes(family.id));
+  const familyGroups = groupFamilies(families, familyGrouping);
+  const familyField = family => {
+    const fieldId = `${idPrefix}-family-${families.indexOf(family)}`;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts__checkbox-field test-fonts__family",
+      key: family.id
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      id: fieldId,
+      value: family.id,
+      checked: chosenIds.includes(family.id),
+      onChange: event => toggleFamilies([family.id], event.target.checked)
+    }), /*#__PURE__*/React.createElement("label", {
+      htmlFor: fieldId
+    }, family.name));
+  };
   const recaptchaEnabled = ((_data$viewer$settings = data.viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.recaptchaEnabled) ?? false;
   const recaptchaSiteKey = (_data$viewer$settings2 = data.viewer.settings) === null || _data$viewer$settings2 === void 0 ? void 0 : _data$viewer$settings2.recaptchaSiteKey;
   const submitForm = useCallback(token => {
@@ -212,21 +233,30 @@ const TestFontsFormComponent = _ref2 => {
     className: "test-fonts__checkbox-field test-fonts__families__all"
   }, /*#__PURE__*/React.createElement(Checkbox, {
     id: `${idPrefix}-families-all`,
-    checked: allChosen,
+    checked: allChosen(families),
     onChange: event => setChosenIds(event.target.checked ? families.map(family => family.id) : [])
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: `${idPrefix}-families-all`
-  }, "Select all")), families.map((family, index) => /*#__PURE__*/React.createElement("div", {
-    className: "test-fonts__checkbox-field test-fonts__family",
-    key: family.id
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    id: `${idPrefix}-family-${index}`,
-    value: family.id,
-    checked: chosenIds.includes(family.id),
-    onChange: event => toggleFamily(family.id, event.target.checked)
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: `${idPrefix}-family-${index}`
-  }, family.name)))), /*#__PURE__*/React.createElement("div", {
+  }, "Select all")), familyGroups.map((_ref4, groupIndex) => {
+    let {
+      superfamily,
+      families: grouped
+    } = _ref4;
+    return superfamily ? /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts__family-group",
+      key: superfamily.id
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts__checkbox-field test-fonts__superfamily"
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      id: `${idPrefix}-superfamily-${groupIndex}`,
+      checked: allChosen(grouped),
+      onChange: event => toggleFamilies(grouped.map(family => family.id), event.target.checked)
+    }), /*#__PURE__*/React.createElement("label", {
+      htmlFor: `${idPrefix}-superfamily-${groupIndex}`
+    }, superfamily.name)), /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts__family-group__families"
+    }, grouped.map(familyField))) : familyField(grouped[0]);
+  })), /*#__PURE__*/React.createElement("div", {
     className: "test-fonts__section"
   }, /*#__PURE__*/React.createElement(TextField, {
     label: "Name *",
@@ -289,7 +319,7 @@ const TestFontsFormComponent = _ref2 => {
     value: id
   }))));
 };
-const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "da75e312a602ac0ee2dfb79271299c77" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
+const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "9ef2c42a7043469fec07a31649623766" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
 // Pass the same `collectionId` / `collectionSlug` as the form's props.
 export async function loadTestFontsFormQuery(variables, options) {
   // Before the collection variables existed this took `options` alone.
@@ -298,11 +328,11 @@ export async function loadTestFontsFormQuery(variables, options) {
   }
   return loadSerializableQuery(TestFontsFormQueryNode, testFontsFormQueryVariables(variables ?? {}), options);
 }
-export function TestFontsFormPreloadedQueryRenderer(_ref4) {
+export function TestFontsFormPreloadedQueryRenderer(_ref5) {
   let {
     preloadedQuery,
     ...rest
-  } = _ref4;
+  } = _ref5;
   // The query node lets the hook commit the payload into the store, so
   // usePreloadedQuery resolves synchronously during SSR instead of
   // refetching (the response cache only exists in the browser).
@@ -322,11 +352,11 @@ function TestFontsFormLazyQueryRenderer(props) {
 // (server-side preload path) or fetches lazily on mount. `EnsureFontdueContext`
 // only self-wraps with `FontdueContextProvider` when no parent Fontdue
 // context is present, seeding it with `config`.
-export default function TestFontsForm(_ref5) {
+export default function TestFontsForm(_ref6) {
   let {
     config,
     ...props
-  } = _ref5;
+  } = _ref6;
   return /*#__PURE__*/React.createElement(EnsureFontdueContext, {
     config: config
   }, props.preloadedQuery ? /*#__PURE__*/React.createElement(TestFontsFormPreloadedQueryRenderer, _extends({}, props, {

package/dist/components/useFontStyle.js

@@ -1,7 +1,7 @@
 import _useFontStyle_fontStyle from "../__generated__/useFontStyle_fontStyle.graphql.js";
 import { useState, useRef, useEffect } from 'react';
 import { graphql, useFragment } from 'react-relay';
-import { loadFont, isFontLoaded } from '../fontLoader.js';
+import { loadFont, isFontLoaded, fontStyleFamily } from '../fontLoader.js';
 import { ensureMetricFallback, metricFallbackFamily } from '../metricFallback.js';
 const FALLBACK_FAMILY = 'Fallback';
 const useFontStyle = _ref => {
@@ -9,7 +9,7 @@ const useFontStyle = _ref => {
     fontStyle: fontStyleKey
   } = _ref;
   const fontStyle = useFragment((_useFontStyle_fontStyle.hash && _useFontStyle_fontStyle.hash !== "171c546f40909692656c5e143a98d8a3" && console.error("The definition of 'useFontStyle_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFontStyle_fontStyle), fontStyleKey ?? null);
-  const fontFamily = fontStyle ? `${fontStyle.cssFamily} ${fontStyle.name}` : null;
+  const fontFamily = fontStyle ? fontStyleFamily(fontStyle.cssFamily, fontStyle.name) : null;
   const sources = fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.webfontSources;
   const verticalMetrics = fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.verticalMetrics;
 

package/dist/fontLoader.d.ts

@@ -9,6 +9,32 @@ interface VerticalMetrics {
     readonly descender: number;
     readonly lineGap: number | null;
 }
+/**
+ * The family name a font style's FontFace is registered under, and the name
+ * CSS must use to render it: `"<cssFamily> <styleName>"`, made safe to parse
+ * as an unquoted CSS font-family.
+ *
+ * Safari 26.0.x (macOS Tahoe / iOS 26 before their point updates) parses the
+ * FontFace family argument as CSS, so a name like "Hell's Gate fairypools"
+ * (the apostrophe opens an unterminated string) or "0712 Regular" (an
+ * identifier can't start with a digit) makes `load()` reject with
+ * "SyntaxError: The string did not match the expected pattern." and the style
+ * never renders. Chrome and other Safari builds (17.3, 18.4, 26.4+, 27.0 were
+ * checked) take the argument literally. A name that is valid either way
+ * works everywhere:
+ *
+ * - an ASCII character other than a letter, digit, `-` or `_` is escaped as
+ *   `_<hex code>` (`'` → `_27`), so distinct names stay distinct;
+ * - a word starting with a digit, `-<digit>` or `--`, or matching a reserved
+ *   word, gets a leading `_`.
+ *
+ * Non-ASCII characters are valid identifier characters and are kept.
+ *
+ * @example
+ *   fontStyleFamily("Hell's Gate", 'fairypools') // => 'Hell_27s Gate fairypools'
+ *   fontStyleFamily('0712', 'Regular')           // => '_0712 Regular'
+ */
+export declare function fontStyleFamily(cssFamily: string | null | undefined, styleName: string): string;
 export declare function isFontLoaded(fontFamily: string): boolean;
 export declare function loadFont(fontFamily: string, sources: ReadonlyArray<FontSource | null>, verticalMetrics?: VerticalMetrics | null): Promise<FontFace | null>;
 /**

package/dist/fontLoader.js

@@ -1,3 +1,40 @@
+// Words CSS refuses as an unquoted font-family identifier (the CSS-wide
+// keywords plus `default`), compared case-insensitively.
+const RESERVED_FAMILY_WORDS = new Set(['inherit', 'initial', 'unset', 'revert', 'revert-layer', 'default']);
+
+/**
+ * The family name a font style's FontFace is registered under, and the name
+ * CSS must use to render it: `"<cssFamily> <styleName>"`, made safe to parse
+ * as an unquoted CSS font-family.
+ *
+ * Safari 26.0.x (macOS Tahoe / iOS 26 before their point updates) parses the
+ * FontFace family argument as CSS, so a name like "Hell's Gate fairypools"
+ * (the apostrophe opens an unterminated string) or "0712 Regular" (an
+ * identifier can't start with a digit) makes `load()` reject with
+ * "SyntaxError: The string did not match the expected pattern." and the style
+ * never renders. Chrome and other Safari builds (17.3, 18.4, 26.4+, 27.0 were
+ * checked) take the argument literally. A name that is valid either way
+ * works everywhere:
+ *
+ * - an ASCII character other than a letter, digit, `-` or `_` is escaped as
+ *   `_<hex code>` (`'` → `_27`), so distinct names stay distinct;
+ * - a word starting with a digit, `-<digit>` or `--`, or matching a reserved
+ *   word, gets a leading `_`.
+ *
+ * Non-ASCII characters are valid identifier characters and are kept.
+ *
+ * @example
+ *   fontStyleFamily("Hell's Gate", 'fairypools') // => 'Hell_27s Gate fairypools'
+ *   fontStyleFamily('0712', 'Regular')           // => '_0712 Regular'
+ */
+export function fontStyleFamily(cssFamily, styleName) {
+  return `${cssFamily ?? ''} ${styleName}`.split(/\s+/).filter(word => word.length > 0).map(cssIdentifierWord).join(' ');
+}
+function cssIdentifierWord(word) {
+  const escaped = word.replace(/[\x00-\x7f]/g, char => /[A-Za-z0-9_-]/.test(char) ? char : `_${char.charCodeAt(0).toString(16)}`);
+  const unparseable = /^(?:[0-9]|-[0-9]|--|-$)/.test(escaped);
+  return unparseable || RESERVED_FAMILY_WORDS.has(escaped.toLowerCase()) ? `_${escaped}` : escaped;
+}
 const cache = new Map();
 const loaded = new Set();
 export function isFontLoaded(fontFamily) {

package/dist/fontdue.css

@@ -185,6 +185,9 @@
 .test-fonts__families .test-fonts__checkbox-field {
   margin-bottom: 10px;
 }
+.test-fonts__family-group__families {
+  padding-left: calc(var(--checkbox-size, 20px) + var(--checkbox-margin, 10px));
+}
 .test-fonts__agreement[data-highlighted=true] {
   color: red;
 }

package/dist/version.js

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

package/package.json

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