fontdue-js 2.19.1 → 2.19.2

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 2.19.2
+
+- Fixed style packages (bundles within a family) not displaying as selected and not responding to deselection clicks when selected via a parent collection bundle or family
+- Fixed auto-upgrade not selecting collection bundles transitively (e.g., selecting both style packages now upgrades through the family to the collection bundle in a single step)
+
 ## 2.19.1
 
 - Fixed collection bundles not auto-selecting when a family at the same price is chosen — the bundle now correctly takes priority over the family itself

package/dist/__tests__/collectionBundleSelection.test.js

@@ -910,6 +910,86 @@ function makeThunderState() {
     });
     (0, _vitest.expect)(newState.selectedSkuIds['text-bundle-sku']).toBe(false);
   });
+  (0, _vitest.it)('deselecting a family bundle deselects the parent collection bundle (transitive)', () => {
+    // Collection bundle is selected. A family bundle (style package) within
+    // it is shown as selected via transitive isSelected. Clicking to deselect
+    // it should find and deselect the collection bundle.
+    const state = makeState({
+      selectedSkuIds: {
+        'coll-bundle-sku': true,
+        'family-sku': false,
+        'var-sku': false,
+        'pkg-upright-sku': false,
+        'pkg-italic-sku': false,
+        s1: false,
+        s2: false,
+        si1: false,
+        si2: false,
+        vs1: false
+      },
+      collectionStyleSkus: {
+        'coll-bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 'si1', 'si2', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'fi1', 'fi2', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-sku'],
+          name: 'Text + Variable'
+        },
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 'si1', 'si2'],
+          fontStyleIds: ['f1', 'f2', 'fi1', 'fi2'],
+          childrenSkuIds: ['pkg-upright-sku', 'pkg-italic-sku'],
+          name: 'Text Family'
+        },
+        'var-sku': {
+          fontStyleSkuIds: ['vs1'],
+          fontStyleIds: ['vf1'],
+          childrenSkuIds: [],
+          name: 'Variable'
+        },
+        'pkg-upright-sku': {
+          fontStyleSkuIds: ['s1', 's2'],
+          fontStyleIds: ['f1', 'f2'],
+          childrenSkuIds: [],
+          name: 'Package Text'
+        },
+        'pkg-italic-sku': {
+          fontStyleSkuIds: ['si1', 'si2'],
+          fontStyleIds: ['fi1', 'fi2'],
+          childrenSkuIds: [],
+          name: 'Package Italic'
+        }
+      },
+      skuPrices: {
+        'coll-bundle-sku': 500,
+        'family-sku': 500,
+        'var-sku': 300,
+        'pkg-upright-sku': 250,
+        'pkg-italic-sku': 250,
+        s1: 100,
+        s2: 100,
+        si1: 100,
+        si2: 100,
+        vs1: 100
+      }
+    });
+
+    // Bundle shows as selected via transitive isSelected
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-upright-sku')(state)).toBe(true);
+
+    // Click to deselect the bundle
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'pkg-upright-sku',
+      selected: false
+    });
+
+    // Collection bundle should be deselected
+    (0, _vitest.expect)(newState.selectedSkuIds['coll-bundle-sku']).toBe(false);
+    // Nothing should be selected anymore
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-upright-sku')(newState)).toBe(false);
+    (0, _vitest.expect)((0, _utils.isSelected)('family-sku')(newState)).toBe(false);
+    (0, _vitest.expect)((0, _utils.isSelected)('s1')(newState)).toBe(false);
+  });
   (0, _vitest.it)('deselecting a bundle does not affect other bundles', () => {
     const state = makeThunderState({
       selectedSkuIds: {
@@ -1178,4 +1258,377 @@ function makeThunderState() {
     });
     (0, _vitest.expect)(Object.keys(newState.selectedSkuIds)).toHaveLength(0);
   });
+});
+
+// =========================================================================
+// isSelected — family bundles (style packages within a family)
+// =========================================================================
+(0, _vitest.describe)('isSelected with family bundles (style packages)', () => {
+  // Helper: a family with two style bundles (upright + italic packages)
+  function makeFamilyWithBundlesState() {
+    let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return makeState({
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: ['pkg-upright-sku', 'pkg-italic-sku'],
+          name: 'Thunder Text Family'
+        },
+        'pkg-upright-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Package Text'
+        },
+        'pkg-italic-sku': {
+          fontStyleSkuIds: ['si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: [],
+          name: 'Package Text Italic'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500,
+        'pkg-upright-sku': 250,
+        'pkg-italic-sku': 250,
+        s1: 100,
+        s2: 100,
+        s3: 100,
+        s4: 100,
+        s5: 100,
+        si1: 100,
+        si2: 100,
+        si3: 100,
+        si4: 100,
+        si5: 100
+      },
+      ...overrides
+    });
+  }
+  (0, _vitest.it)('bundles show selected when family is directly selected', () => {
+    const state = makeFamilyWithBundlesState({
+      selectedSkuIds: {
+        'family-sku': true,
+        'pkg-upright-sku': false,
+        'pkg-italic-sku': false,
+        s1: false,
+        s2: false,
+        s3: false,
+        s4: false,
+        s5: false,
+        si1: false,
+        si2: false,
+        si3: false,
+        si4: false,
+        si5: false
+      }
+    });
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-upright-sku')(state)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-italic-sku')(state)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('s1')(state)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('si1')(state)).toBe(true);
+  });
+  (0, _vitest.it)('bundles show selected when collection bundle is selected (transitive)', () => {
+    // Collection bundle is selected → family is false → family bundles should
+    // still show selected because the collection bundle covers all styles
+    const state = makeFamilyWithBundlesState({
+      collectionStyleSkus: {
+        // Collection bundle: groups family + variable family
+        'coll-bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-sku'],
+          name: 'Thunder Text + Variable'
+        },
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: ['pkg-upright-sku', 'pkg-italic-sku'],
+          name: 'Thunder Text Family'
+        },
+        'var-sku': {
+          fontStyleSkuIds: ['vs1'],
+          fontStyleIds: ['vf1'],
+          childrenSkuIds: [],
+          name: 'Thunder Text Variable'
+        },
+        'pkg-upright-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Package Text'
+        },
+        'pkg-italic-sku': {
+          fontStyleSkuIds: ['si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: [],
+          name: 'Package Text Italic'
+        }
+      },
+      selectedSkuIds: {
+        'coll-bundle-sku': true,
+        'family-sku': false,
+        'var-sku': false,
+        'pkg-upright-sku': false,
+        'pkg-italic-sku': false,
+        s1: false,
+        s2: false,
+        s3: false,
+        s4: false,
+        s5: false,
+        si1: false,
+        si2: false,
+        si3: false,
+        si4: false,
+        si5: false,
+        vs1: false
+      }
+    });
+
+    // Family shows selected (direct child of collection bundle)
+    (0, _vitest.expect)((0, _utils.isSelected)('family-sku')(state)).toBe(true);
+    // Bundles should show selected (grandchildren — family is child of
+    // collection bundle, bundles are children of family)
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-upright-sku')(state)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-italic-sku')(state)).toBe(true);
+    // Individual styles should also show selected
+    (0, _vitest.expect)((0, _utils.isSelected)('s1')(state)).toBe(true);
+  });
+  (0, _vitest.it)('selecting one bundle then another upgrades to family via reducer', () => {
+    const state = makeFamilyWithBundlesState();
+
+    // Select first bundle
+    let newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'pkg-upright-sku',
+      selected: true
+    });
+    (0, _vitest.expect)(newState.selectedSkuIds['pkg-upright-sku']).toBe(true);
+
+    // Select second bundle — should upgrade to family
+    newState = (0, _reducer.default)(newState, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'pkg-italic-sku',
+      selected: true
+    });
+
+    // Family should be selected since family ($500) = two bundles ($250+$250)
+    (0, _vitest.expect)(newState.selectedSkuIds['family-sku']).toBe(true);
+    // Both bundles should report as selected
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-upright-sku')(newState)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-italic-sku')(newState)).toBe(true);
+  });
+  (0, _vitest.it)('auto-upgrades transitively: bundle → family → collection bundle', () => {
+    // When a collection bundle exists at the same price as the family,
+    // selecting both bundles should upgrade all the way to the collection
+    // bundle (not stop at the family)
+    const state = makeFamilyWithBundlesState({
+      collectionStyleSkus: {
+        'coll-bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-sku'],
+          name: 'Thunder Text + Variable'
+        },
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: ['pkg-upright-sku', 'pkg-italic-sku'],
+          name: 'Thunder Text Family'
+        },
+        'var-sku': {
+          fontStyleSkuIds: ['vs1'],
+          fontStyleIds: ['vf1'],
+          childrenSkuIds: [],
+          name: 'Thunder Text Variable'
+        },
+        'pkg-upright-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Package Text'
+        },
+        'pkg-italic-sku': {
+          fontStyleSkuIds: ['si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: [],
+          name: 'Package Text Italic'
+        }
+      },
+      skuPrices: {
+        'coll-bundle-sku': 500,
+        'family-sku': 500,
+        'var-sku': 300,
+        'pkg-upright-sku': 250,
+        'pkg-italic-sku': 250,
+        s1: 100,
+        s2: 100,
+        s3: 100,
+        s4: 100,
+        s5: 100,
+        si1: 100,
+        si2: 100,
+        si3: 100,
+        si4: 100,
+        si5: 100,
+        vs1: 100
+      },
+      selectedSkuIds: {
+        'pkg-upright-sku': true
+      }
+    });
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'pkg-italic-sku',
+      selected: true
+    });
+
+    // Should transitively upgrade: bundle → family → collection bundle
+    (0, _vitest.expect)(newState.selectedSkuIds['coll-bundle-sku']).toBe(true);
+    (0, _vitest.expect)(newState.selectedSkuIds['family-sku']).toBe(false);
+    (0, _vitest.expect)(newState.selectedSkuIds['pkg-upright-sku']).toBe(false);
+    (0, _vitest.expect)(newState.selectedSkuIds['pkg-italic-sku']).toBe(false);
+
+    // All items should report as selected via isSelected
+    (0, _vitest.expect)((0, _utils.isSelected)('family-sku')(newState)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-upright-sku')(newState)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('pkg-italic-sku')(newState)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('s1')(newState)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('vs1')(newState)).toBe(true);
+  });
+  (0, _vitest.it)('prefers collection bundle over family when family has duplicate fontStyleSkuIds from bundles', () => {
+    // In production data, flattenSkuData produces a family entry whose
+    // fontStyleSkuIds includes BOTH the family's own styles AND the
+    // overlapping styles from its child bundles, creating duplicates.
+    // The tie-breaker must use non-self preference (not raw array length)
+    // to avoid the family's inflated count beating the collection bundle.
+    const state = makeState({
+      collectionStyleSkus: {
+        'family-sku': {
+          // 10 unique styles, but listed 20 times (family's own + bundle overlap)
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5', 's1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: ['pkg-upright-sku', 'pkg-italic-sku'],
+          name: 'Thunder Caption Family'
+        },
+        'coll-bundle-sku': {
+          // 12 unique styles (family 10 + variable 2)
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5', 'vs1', 'vs2'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5', 'vf1', 'vf2'],
+          childrenSkuIds: ['family-sku', 'var-sku'],
+          name: 'Thunder Caption Family + Variable'
+        },
+        'var-sku': {
+          fontStyleSkuIds: ['vs1', 'vs2'],
+          fontStyleIds: ['vf1', 'vf2'],
+          childrenSkuIds: [],
+          name: 'Thunder Caption Variable'
+        },
+        'pkg-upright-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Package Caption'
+        },
+        'pkg-italic-sku': {
+          fontStyleSkuIds: ['si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: [],
+          name: 'Package Caption Italic'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500,
+        'coll-bundle-sku': 500,
+        'var-sku': 500,
+        'pkg-upright-sku': 300,
+        'pkg-italic-sku': 300,
+        s1: 100,
+        s2: 100,
+        s3: 100,
+        s4: 100,
+        s5: 100,
+        si1: 100,
+        si2: 100,
+        si3: 100,
+        si4: 100,
+        si5: 100,
+        vs1: 100,
+        vs2: 100
+      }
+    });
+
+    // family-sku fontStyleSkuIds.length is 20 (duplicates), coll-bundle is 12.
+    // A naive .length comparison would pick the family. The non-self
+    // preference must win so the collection bundle is auto-selected.
+    const [collId] = (0, _reducer.collectionSkuIdWithDiscount)(state, 'family-sku');
+    (0, _vitest.expect)(collId).toBe('coll-bundle-sku');
+  });
+  (0, _vitest.it)('transitive upgrade prefers the collection with the most font styles', () => {
+    // When two collections have the same price difference, prefer the one
+    // covering more font styles
+    const state = makeFamilyWithBundlesState({
+      collectionStyleSkus: {
+        'small-bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: ['family-sku'],
+          name: 'Small Bundle'
+        },
+        'big-bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-sku'],
+          name: 'Big Bundle'
+        },
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: ['pkg-upright-sku', 'pkg-italic-sku'],
+          name: 'Thunder Text Family'
+        },
+        'var-sku': {
+          fontStyleSkuIds: ['vs1'],
+          fontStyleIds: ['vf1'],
+          childrenSkuIds: [],
+          name: 'Variable'
+        },
+        'pkg-upright-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Package Text'
+        },
+        'pkg-italic-sku': {
+          fontStyleSkuIds: ['si1', 'si2', 'si3', 'si4', 'si5'],
+          fontStyleIds: ['fi1', 'fi2', 'fi3', 'fi4', 'fi5'],
+          childrenSkuIds: [],
+          name: 'Package Text Italic'
+        }
+      },
+      skuPrices: {
+        'small-bundle-sku': 500,
+        'big-bundle-sku': 500,
+        'family-sku': 500,
+        'var-sku': 300,
+        'pkg-upright-sku': 250,
+        'pkg-italic-sku': 250,
+        s1: 100,
+        s2: 100,
+        s3: 100,
+        s4: 100,
+        s5: 100,
+        si1: 100,
+        si2: 100,
+        si3: 100,
+        si4: 100,
+        si5: 100,
+        vs1: 100
+      }
+    });
+    const [collId] = (0, _reducer.collectionSkuIdWithDiscount)(state, 'family-sku');
+    // Both bundles have the same price, but big-bundle has more styles
+    (0, _vitest.expect)(collId).toBe('big-bundle-sku');
+  });
 });

package/dist/reducer.js

@@ -82,17 +82,27 @@ const collectionSkuIdWithDiscount = (state, skuId) => {
   const differences = (0, _utils.collectionSkuIdsDifferences)(state, skuId);
   const collectionId = Object.keys(differences).filter(collSkuId => differences[collSkuId] <= state.skuPrices[skuId]).reduce((smallest, key) => {
     if (!smallest || differences[key] < differences[smallest]) return key;
-    // When differences are equal, prefer a collection that is not the
-    // SKU being selected — this ensures collection bundles are preferred
-    // over selecting the family itself at the same price
-    if (differences[key] === differences[smallest] && smallest === skuId && key !== skuId) return key;
+    if (differences[key] === differences[smallest]) {
+      // When differences are equal, prefer a collection that is not the
+      // SKU being selected — this ensures collection bundles are preferred
+      // over selecting the family itself at the same price
+      if (smallest === skuId && key !== skuId) return key;
+      // Among non-self candidates, prefer the one covering more unique
+      // font styles — this ensures the most comprehensive collection wins
+      if (smallest !== skuId && key !== skuId) {
+        var _state$collectionStyl, _state$collectionStyl2;
+        const smallestStyles = new Set((_state$collectionStyl = state.collectionStyleSkus[smallest]) === null || _state$collectionStyl === void 0 ? void 0 : _state$collectionStyl.fontStyleSkuIds).size;
+        const keyStyles = new Set((_state$collectionStyl2 = state.collectionStyleSkus[key]) === null || _state$collectionStyl2 === void 0 ? void 0 : _state$collectionStyl2.fontStyleSkuIds).size;
+        if (keyStyles > smallestStyles) return key;
+      }
+    }
     return smallest;
   }, null);
   if (collectionId) return [collectionId, differences[collectionId]];
   return [null, null];
 };
 exports.collectionSkuIdWithDiscount = collectionSkuIdWithDiscount;
-const selectedCollectionSkuIdContainingSkuId = (state, skuId) => Object.keys(state.selectedSkuIds).filter(id => state.selectedSkuIds[id] === true).find(selectedSkuId => (0, _utils.collContainsSkuId)(state.collectionStyleSkus[selectedSkuId], skuId));
+const selectedCollectionSkuIdContainingSkuId = (state, skuId) => Object.keys(state.selectedSkuIds).filter(id => state.selectedSkuIds[id] === true).find(selectedSkuId => (0, _utils.collTransitivelyContainsSkuId)(state.collectionStyleSkus, selectedSkuId, skuId));
 const setKeysFalse = (acc, key) => {
   acc[key] = false;
   return acc;
@@ -104,12 +114,24 @@ const unselectedMembersSkuIds = (state, action) => {
     selected
   } = action;
   if (!selected) return {}; // only do this in case we are selecting something
-  const collectionMemberSkus = state.collectionStyleSkus[skuId];
-  if (!collectionMemberSkus) return {}; // we don't have data for this sku
-  return {
-    ...collectionMemberSkus.fontStyleSkuIds.reduce(setKeysFalse, {}),
-    ...collectionMemberSkus.childrenSkuIds.reduce(setKeysFalse, {})
+
+  // Recursively collect all descendant SKU IDs so that transitive
+  // selections (e.g., collection bundle → family → bundle) are all
+  // marked as false
+  const result = {};
+  const collectMembers = collSkuId => {
+    const members = state.collectionStyleSkus[collSkuId];
+    if (!members) return;
+    for (const id of members.fontStyleSkuIds) {
+      result[id] = false;
+    }
+    for (const id of members.childrenSkuIds) {
+      result[id] = false;
+      collectMembers(id);
+    }
   };
+  collectMembers(skuId);
+  return result;
 };
 const selectSkuId = (state, action) => {
   if (action.type !== 'SELECT_SKU_ID') return state;

package/dist/utils.d.ts

@@ -4,6 +4,9 @@ export declare const pluralize: (count: number, singular: string, plural?: strin
 export declare function notEmpty<TValue>(value: TValue | null | undefined): value is TValue;
 export declare function kebabToCamel(str: string): string;
 export declare const collContainsSkuId: (coll: CollectionStyleSkus | undefined, skuIdOrStyleId: string) => boolean;
+export declare const collTransitivelyContainsSkuId: (collectionStyleSkus: {
+    [key: string]: CollectionStyleSkus | undefined;
+}, collSkuId: string, skuIdOrStyleId: string) => boolean;
 interface CollectionSkuIdsDifferences {
     [collectionSkuId: string]: number;
 }

package/dist/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.compareVariableSettings = exports.collectionSkuIdsDifferences = exports.collContainsSkuId = void 0;
+exports.compareVariableSettings = exports.collectionSkuIdsDifferences = exports.collTransitivelyContainsSkuId = exports.collContainsSkuId = void 0;
 exports.getFeatureGlyphs = getFeatureGlyphs;
 exports.isSelected = exports.inspect = void 0;
 exports.kebabToCamel = kebabToCamel;
@@ -29,12 +29,25 @@ const collContainsSkuId = (coll, skuIdOrStyleId) => {
   if (!coll) return false;
   return coll.childrenSkuIds.indexOf(skuIdOrStyleId) >= 0 || coll.fontStyleSkuIds.indexOf(skuIdOrStyleId) >= 0 || coll.fontStyleIds.indexOf(skuIdOrStyleId) >= 0;
 };
+
+// Transitive containment check — walks the collection hierarchy to find
+// if a SKU is contained at any depth (e.g., collection bundle → family → bundle)
 exports.collContainsSkuId = collContainsSkuId;
+const collTransitivelyContainsSkuId = (collectionStyleSkus, collSkuId, skuIdOrStyleId) => {
+  const coll = collectionStyleSkus[collSkuId];
+  if (!coll) return false;
+  if (collContainsSkuId(coll, skuIdOrStyleId)) return true;
+  return coll.childrenSkuIds.some(childSkuId => collTransitivelyContainsSkuId(collectionStyleSkus, childSkuId, skuIdOrStyleId));
+};
+exports.collTransitivelyContainsSkuId = collTransitivelyContainsSkuId;
 const isSelected = skuIdOrStyleId => state => {
   if (!skuIdOrStyleId) return false;
-  // get the collections that contain this skuId as a fontStyle
-  const collectionSkuIds = Object.keys(state.collectionStyleSkus).filter(collSkuId => collContainsSkuId(state.collectionStyleSkus[collSkuId], skuIdOrStyleId));
-  return state.selectedSkuIds[skuIdOrStyleId] === true || collectionSkuIds.some(collSkuId => state.selectedSkuIds[collSkuId] === true);
+  if (state.selectedSkuIds[skuIdOrStyleId] === true) return true;
+  // get the collections that contain this skuId as a fontStyle or child
+  const parentCollectionSkuIds = Object.keys(state.collectionStyleSkus).filter(collSkuId => collContainsSkuId(state.collectionStyleSkus[collSkuId], skuIdOrStyleId));
+  // Recursively check ancestors — handles transitive selection
+  // (e.g., collection bundle → family → bundle)
+  return parentCollectionSkuIds.some(parentSkuId => isSelected(parentSkuId)(state));
 };
 
 // find any collection ancestors that contain this skuId,
@@ -42,11 +55,9 @@ const isSelected = skuIdOrStyleId => state => {
 // and return the delta between the collection price and the sum.
 exports.isSelected = isSelected;
 const collectionSkuIdsDifferences = (state, skuId) => Object.keys(state.collectionStyleSkus).filter(collectionSkuId => {
-  const coll = state.collectionStyleSkus[collectionSkuId];
-  return skuId === collectionSkuId || collContainsSkuId(coll, skuId);
+  return skuId === collectionSkuId || collTransitivelyContainsSkuId(state.collectionStyleSkus, collectionSkuId, skuId);
 }).reduce((acc, collectionSkuId) => {
-  const coll = state.collectionStyleSkus[collectionSkuId];
-  const selectedSkuIdsInColl = Object.keys(state.selectedSkuIds).filter(selectedSkuId => state.selectedSkuIds[selectedSkuId] === true && collContainsSkuId(coll, selectedSkuId));
+  const selectedSkuIdsInColl = Object.keys(state.selectedSkuIds).filter(selectedSkuId => state.selectedSkuIds[selectedSkuId] === true && collTransitivelyContainsSkuId(state.collectionStyleSkus, collectionSkuId, selectedSkuId));
   const sumOfSelectedSkuIdsInColl = selectedSkuIdsInColl.map(selectedSkuId => state.skuPrices[selectedSkuId] ?? 0).reduce((acc, price) => acc + price, 0);
   acc[collectionSkuId] = (state.skuPrices[collectionSkuId] ?? 0) - sumOfSelectedSkuIdsInColl;
   return acc;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.19.1",
+  "version": "2.19.2",
   "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",