fontdue-js 2.21.0 → 2.22.1

package/dist-cjs/__tests__/collectionBundleSelection.test.js

@@ -0,0 +1,1630 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _utils = require("../utils");
+var _reducer = _interopRequireWildcard(require("../reducer"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Mock react-relay's graphql tag since productState.ts uses it at import time
+_vitest.vi.mock('react-relay', () => ({
+  graphql: () => null,
+  fetchQuery: _vitest.vi.fn()
+}));
+// Helper to build a minimal FontdueState for testing
+function makeState(overrides = {}) {
+  return {
+    cartOpen: false,
+    precartOpen: false,
+    selectedSkuIds: {},
+    licenseOptions: [],
+    collectionStyleSkus: {},
+    collectionSkus: {},
+    skuPrices: {},
+    fetchedCollectionIds: [],
+    storeModalRoute: {
+      name: 'index'
+    },
+    storeModalHistory: [],
+    orderVariableSelections: [],
+    licenseeIsBillingIdentity: null,
+    ...overrides
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Shared fixtures — reusable across tests that need the full
+// "superfamily + 3 families + 3 bundles" topology
+// ---------------------------------------------------------------------------
+function makeThunderState(overrides = {}) {
+  return makeState({
+    collectionStyleSkus: {
+      // Superfamily
+      'super-sku': {
+        fontStyleSkuIds: ['s1', 's2', 'ds1', 'ds2', 'cs1', 'cs2', 'vs1', 'vis1', 'dvs1', 'dvis1', 'cvs1', 'cvis1'],
+        fontStyleIds: ['f1', 'f2', 'df1', 'df2', 'cf1', 'cf2', 'vf1', 'vif1', 'dvf1', 'dvif1', 'cvf1', 'cvif1'],
+        childrenSkuIds: ['text-sku', 'display-sku', 'caption-sku', 'text-var-sku', 'text-var-italic-sku', 'display-var-sku', 'display-var-italic-sku', 'caption-var-sku', 'caption-var-italic-sku', 'text-bundle-sku', 'display-bundle-sku', 'caption-bundle-sku'],
+        name: 'Thunder Text Collection'
+      },
+      // Static families
+      'text-sku': {
+        fontStyleSkuIds: ['s1', 's2'],
+        fontStyleIds: ['f1', 'f2'],
+        childrenSkuIds: [],
+        name: 'Thunder Text'
+      },
+      'display-sku': {
+        fontStyleSkuIds: ['ds1', 'ds2'],
+        fontStyleIds: ['df1', 'df2'],
+        childrenSkuIds: [],
+        name: 'Thunder Display'
+      },
+      'caption-sku': {
+        fontStyleSkuIds: ['cs1', 'cs2'],
+        fontStyleIds: ['cf1', 'cf2'],
+        childrenSkuIds: [],
+        name: 'Thunder Caption'
+      },
+      // Variable families
+      'text-var-sku': {
+        fontStyleSkuIds: ['vs1'],
+        fontStyleIds: ['vf1'],
+        childrenSkuIds: [],
+        name: 'Thunder Text Variable'
+      },
+      'text-var-italic-sku': {
+        fontStyleSkuIds: ['vis1'],
+        fontStyleIds: ['vif1'],
+        childrenSkuIds: [],
+        name: 'Thunder Text Italic Variable'
+      },
+      'display-var-sku': {
+        fontStyleSkuIds: ['dvs1'],
+        fontStyleIds: ['dvf1'],
+        childrenSkuIds: [],
+        name: 'Thunder Display Variable'
+      },
+      'display-var-italic-sku': {
+        fontStyleSkuIds: ['dvis1'],
+        fontStyleIds: ['dvif1'],
+        childrenSkuIds: [],
+        name: 'Thunder Display Italic Variable'
+      },
+      'caption-var-sku': {
+        fontStyleSkuIds: ['cvs1'],
+        fontStyleIds: ['cvf1'],
+        childrenSkuIds: [],
+        name: 'Thunder Caption Variable'
+      },
+      'caption-var-italic-sku': {
+        fontStyleSkuIds: ['cvis1'],
+        fontStyleIds: ['cvif1'],
+        childrenSkuIds: [],
+        name: 'Thunder Caption Italic Variable'
+      },
+      // Collection bundles
+      'text-bundle-sku': {
+        fontStyleSkuIds: ['s1', 's2', 'vs1', 'vis1'],
+        fontStyleIds: ['f1', 'f2', 'vf1', 'vif1'],
+        childrenSkuIds: ['text-sku', 'text-var-sku', 'text-var-italic-sku'],
+        name: 'Thunder Text Family + Variable'
+      },
+      'display-bundle-sku': {
+        fontStyleSkuIds: ['ds1', 'ds2', 'dvs1', 'dvis1'],
+        fontStyleIds: ['df1', 'df2', 'dvf1', 'dvif1'],
+        childrenSkuIds: ['display-sku', 'display-var-sku', 'display-var-italic-sku'],
+        name: 'Thunder Display Family + Variable'
+      },
+      'caption-bundle-sku': {
+        fontStyleSkuIds: ['cs1', 'cs2', 'cvs1', 'cvis1'],
+        fontStyleIds: ['cf1', 'cf2', 'cvf1', 'cvif1'],
+        childrenSkuIds: ['caption-sku', 'caption-var-sku', 'caption-var-italic-sku'],
+        name: 'Thunder Caption Family + Variable'
+      }
+    },
+    skuPrices: {
+      'super-sku': 750,
+      'text-sku': 500,
+      'display-sku': 500,
+      'caption-sku': 500,
+      'text-var-sku': 300,
+      'text-var-italic-sku': 300,
+      'display-var-sku': 300,
+      'display-var-italic-sku': 300,
+      'caption-var-sku': 300,
+      'caption-var-italic-sku': 300,
+      'text-bundle-sku': 500,
+      'display-bundle-sku': 500,
+      'caption-bundle-sku': 500,
+      s1: 40,
+      s2: 40,
+      ds1: 40,
+      ds2: 40,
+      cs1: 40,
+      cs2: 40,
+      vs1: 40,
+      vis1: 40,
+      dvs1: 40,
+      dvis1: 40,
+      cvs1: 40,
+      cvis1: 40
+    },
+    ...overrides
+  });
+}
+
+// =========================================================================
+// collContainsSkuId
+// =========================================================================
+(0, _vitest.describe)('collContainsSkuId', () => {
+  (0, _vitest.it)('returns true when skuId is in childrenSkuIds', () => {
+    const coll = {
+      fontStyleSkuIds: [],
+      fontStyleIds: [],
+      childrenSkuIds: ['child-sku-1', 'child-sku-2'],
+      name: 'Test'
+    };
+    (0, _vitest.expect)((0, _utils.collContainsSkuId)(coll, 'child-sku-1')).toBe(true);
+  });
+  (0, _vitest.it)('returns true when skuId is in fontStyleSkuIds', () => {
+    const coll = {
+      fontStyleSkuIds: ['style-sku-1'],
+      fontStyleIds: [],
+      childrenSkuIds: [],
+      name: 'Test'
+    };
+    (0, _vitest.expect)((0, _utils.collContainsSkuId)(coll, 'style-sku-1')).toBe(true);
+  });
+  (0, _vitest.it)('returns true when id is in fontStyleIds', () => {
+    const coll = {
+      fontStyleSkuIds: [],
+      fontStyleIds: ['style-id-1'],
+      childrenSkuIds: [],
+      name: 'Test'
+    };
+    (0, _vitest.expect)((0, _utils.collContainsSkuId)(coll, 'style-id-1')).toBe(true);
+  });
+  (0, _vitest.it)('returns false for unknown skuId', () => {
+    const coll = {
+      fontStyleSkuIds: ['style-sku-1'],
+      fontStyleIds: ['style-1'],
+      childrenSkuIds: ['child-sku-1'],
+      name: 'Test'
+    };
+    (0, _vitest.expect)((0, _utils.collContainsSkuId)(coll, 'unknown-sku')).toBe(false);
+  });
+  (0, _vitest.it)('returns false for undefined collection', () => {
+    (0, _vitest.expect)((0, _utils.collContainsSkuId)(undefined, 'any-sku')).toBe(false);
+  });
+});
+
+// =========================================================================
+// isSelected
+// =========================================================================
+(0, _vitest.describe)('isSelected', () => {
+  (0, _vitest.it)('returns true when the SKU is directly selected', () => {
+    const state = makeState({
+      selectedSkuIds: {
+        'sku-1': true
+      }
+    });
+    (0, _vitest.expect)((0, _utils.isSelected)('sku-1')(state)).toBe(true);
+  });
+  (0, _vitest.it)('returns false when the SKU is explicitly deselected (false)', () => {
+    const state = makeState({
+      selectedSkuIds: {
+        'sku-1': false
+      }
+    });
+    (0, _vitest.expect)((0, _utils.isSelected)('sku-1')(state)).toBe(false);
+  });
+  (0, _vitest.it)('returns true when a parent collection is selected', () => {
+    const state = makeState({
+      selectedSkuIds: {
+        'bundle-sku': true
+      },
+      collectionStyleSkus: {
+        'bundle-sku': {
+          fontStyleSkuIds: ['s1'],
+          fontStyleIds: ['f1'],
+          childrenSkuIds: ['family-sku'],
+          name: 'Bundle'
+        }
+      }
+    });
+    // Style SKU contained via fontStyleSkuIds
+    (0, _vitest.expect)((0, _utils.isSelected)('s1')(state)).toBe(true);
+    // Family SKU contained via childrenSkuIds
+    (0, _vitest.expect)((0, _utils.isSelected)('family-sku')(state)).toBe(true);
+    // Font style ID contained via fontStyleIds
+    (0, _vitest.expect)((0, _utils.isSelected)('f1')(state)).toBe(true);
+  });
+  (0, _vitest.it)('returns false when a parent collection is deselected', () => {
+    const state = makeState({
+      selectedSkuIds: {
+        'bundle-sku': false,
+        's1': false
+      },
+      collectionStyleSkus: {
+        'bundle-sku': {
+          fontStyleSkuIds: ['s1'],
+          fontStyleIds: ['f1'],
+          childrenSkuIds: ['family-sku'],
+          name: 'Bundle'
+        }
+      }
+    });
+    (0, _vitest.expect)((0, _utils.isSelected)('s1')(state)).toBe(false);
+    (0, _vitest.expect)((0, _utils.isSelected)('family-sku')(state)).toBe(false);
+  });
+  (0, _vitest.it)('returns false for null skuId', () => {
+    const state = makeState();
+    (0, _vitest.expect)((0, _utils.isSelected)(null)(state)).toBe(false);
+  });
+  (0, _vitest.it)('returns true for member when bundle is selected, even if member is explicitly false', () => {
+    // After auto-selection, members are set to false but should still appear
+    // selected because the parent bundle is true
+    const state = makeState({
+      selectedSkuIds: {
+        'bundle-sku': true,
+        'family-sku': false,
+        'var-sku': false
+      },
+      collectionStyleSkus: {
+        'bundle-sku': {
+          fontStyleSkuIds: ['s1', 'vs1'],
+          fontStyleIds: ['f1', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-sku'],
+          name: 'Bundle'
+        }
+      }
+    });
+    (0, _vitest.expect)((0, _utils.isSelected)('family-sku')(state)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('var-sku')(state)).toBe(true);
+    (0, _vitest.expect)((0, _utils.isSelected)('s1')(state)).toBe(true);
+  });
+});
+
+// =========================================================================
+// collectionSkuIdsDifferences
+// =========================================================================
+(0, _vitest.describe)('collectionSkuIdsDifferences', () => {
+  (0, _vitest.it)('includes self when skuId matches a collection', () => {
+    const state = makeState({
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2'],
+          fontStyleIds: ['f1', 'f2'],
+          childrenSkuIds: [],
+          name: 'Family'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500,
+        s1: 40,
+        s2: 40
+      }
+    });
+    const diffs = (0, _utils.collectionSkuIdsDifferences)(state, 'family-sku');
+    (0, _vitest.expect)(diffs).toHaveProperty('family-sku');
+    (0, _vitest.expect)(diffs['family-sku']).toBe(500);
+  });
+  (0, _vitest.it)('includes parent collections that contain the skuId', () => {
+    const state = makeState({
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2'],
+          fontStyleIds: ['f1', 'f2'],
+          childrenSkuIds: [],
+          name: 'Family'
+        },
+        'bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-family-sku'],
+          name: 'Bundle'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500,
+        'bundle-sku': 500,
+        'var-family-sku': 300,
+        s1: 40,
+        s2: 40,
+        vs1: 40
+      }
+    });
+    const diffs = (0, _utils.collectionSkuIdsDifferences)(state, 'family-sku');
+    (0, _vitest.expect)(diffs).toHaveProperty('family-sku');
+    (0, _vitest.expect)(diffs).toHaveProperty('bundle-sku');
+  });
+  (0, _vitest.it)('subtracts already-selected items from the difference', () => {
+    const state = makeState({
+      selectedSkuIds: {
+        'family-sku': true
+      },
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2'],
+          fontStyleIds: ['f1', 'f2'],
+          childrenSkuIds: [],
+          name: 'Family'
+        },
+        'bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-family-sku'],
+          name: 'Bundle'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500,
+        'bundle-sku': 500,
+        'var-family-sku': 300
+      }
+    });
+    const diffs = (0, _utils.collectionSkuIdsDifferences)(state, 'var-family-sku');
+    (0, _vitest.expect)(diffs['bundle-sku']).toBe(0);
+  });
+  (0, _vitest.it)('treats missing prices as 0 rather than producing NaN', () => {
+    const state = makeState({
+      selectedSkuIds: {
+        'orphan-sku': true
+      },
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['orphan-sku'],
+          fontStyleIds: [],
+          childrenSkuIds: [],
+          name: 'Family'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500
+        // 'orphan-sku' deliberately missing
+      }
+    });
+    const diffs = (0, _utils.collectionSkuIdsDifferences)(state, 'orphan-sku');
+    // Missing price treated as 0, so difference = 500 - 0 = 500
+    (0, _vitest.expect)(diffs['family-sku']).toBe(500);
+  });
+  (0, _vitest.it)('only counts items that are selected true, not false', () => {
+    const state = makeState({
+      selectedSkuIds: {
+        'family-sku': false
+      },
+      collectionStyleSkus: {
+        'bundle-sku': {
+          fontStyleSkuIds: [],
+          fontStyleIds: [],
+          childrenSkuIds: ['family-sku'],
+          name: 'Bundle'
+        },
+        'family-sku': {
+          fontStyleSkuIds: [],
+          fontStyleIds: [],
+          childrenSkuIds: [],
+          name: 'Family'
+        }
+      },
+      skuPrices: {
+        'bundle-sku': 500,
+        'family-sku': 300
+      }
+    });
+    const diffs = (0, _utils.collectionSkuIdsDifferences)(state, 'family-sku');
+    // family-sku is false, not true, so it shouldn't be subtracted
+    (0, _vitest.expect)(diffs['bundle-sku']).toBe(500);
+  });
+  (0, _vitest.it)('returns empty object when no collections contain the skuId', () => {
+    const state = makeState({
+      collectionStyleSkus: {
+        'other-sku': {
+          fontStyleSkuIds: ['x1'],
+          fontStyleIds: ['xf1'],
+          childrenSkuIds: [],
+          name: 'Other'
+        }
+      },
+      skuPrices: {
+        'other-sku': 100,
+        'lonely-style': 40
+      }
+    });
+    const diffs = (0, _utils.collectionSkuIdsDifferences)(state, 'lonely-style');
+    (0, _vitest.expect)(Object.keys(diffs)).toHaveLength(0);
+  });
+});
+
+// =========================================================================
+// collectionSkuIdWithDiscount
+// =========================================================================
+(0, _vitest.describe)('collectionSkuIdWithDiscount', () => {
+  (0, _vitest.it)('returns null when no collection is a better deal', () => {
+    const state = makeState({
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1'],
+          fontStyleIds: ['f1'],
+          childrenSkuIds: [],
+          name: 'Family'
+        }
+      },
+      skuPrices: {
+        s1: 40,
+        'family-sku': 500
+      }
+    });
+    const [collId, amount] = (0, _reducer.collectionSkuIdWithDiscount)(state, 's1');
+    (0, _vitest.expect)(collId).toBe(null);
+    (0, _vitest.expect)(amount).toBe(null);
+  });
+  (0, _vitest.it)('returns parent collection when it is cheaper for individual style', () => {
+    const state = makeState({
+      selectedSkuIds: {
+        s1: true,
+        s2: true,
+        s3: true,
+        s4: true
+      },
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Family'
+        }
+      },
+      skuPrices: {
+        'family-sku': 200,
+        s1: 40,
+        s2: 40,
+        s3: 40,
+        s4: 40,
+        s5: 40
+      }
+    });
+    const [collId, amount] = (0, _reducer.collectionSkuIdWithDiscount)(state, 's5');
+    (0, _vitest.expect)(collId).toBe('family-sku');
+    (0, _vitest.expect)(amount).toBe(40);
+  });
+  (0, _vitest.it)('prefers collection bundle over self when prices are equal', () => {
+    const state = makeState({
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Thunder Text'
+        },
+        'var-family-sku': {
+          fontStyleSkuIds: ['vs1'],
+          fontStyleIds: ['vf1'],
+          childrenSkuIds: [],
+          name: 'Thunder Text Variable'
+        },
+        'var-italic-sku': {
+          fontStyleSkuIds: ['vis1'],
+          fontStyleIds: ['vif1'],
+          childrenSkuIds: [],
+          name: 'Thunder Text Italic Variable'
+        },
+        'bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5', 'vs1', 'vis1'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5', 'vf1', 'vif1'],
+          childrenSkuIds: ['family-sku', 'var-family-sku', 'var-italic-sku'],
+          name: 'Thunder Text Family + Variable'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500,
+        'bundle-sku': 500,
+        'var-family-sku': 300,
+        'var-italic-sku': 300,
+        s1: 40,
+        s2: 40,
+        s3: 40,
+        s4: 40,
+        s5: 40,
+        vs1: 40,
+        vis1: 40
+      }
+    });
+    const [collId, amount] = (0, _reducer.collectionSkuIdWithDiscount)(state, 'family-sku');
+    (0, _vitest.expect)(collId).toBe('bundle-sku');
+    (0, _vitest.expect)(amount).toBe(500);
+  });
+  (0, _vitest.it)('prefers collection bundle regardless of object key order', () => {
+    const state = makeState({
+      collectionStyleSkus: {
+        'bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-family-sku'],
+          name: 'Bundle'
+        },
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2'],
+          fontStyleIds: ['f1', 'f2'],
+          childrenSkuIds: [],
+          name: 'Family'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500,
+        'bundle-sku': 500,
+        'var-family-sku': 300
+      }
+    });
+    const [collId] = (0, _reducer.collectionSkuIdWithDiscount)(state, 'family-sku');
+    (0, _vitest.expect)(collId).toBe('bundle-sku');
+  });
+  (0, _vitest.it)('still returns self for display pricing (superfamily with no parent)', () => {
+    const state = makeState({
+      selectedSkuIds: {
+        'family-sku': true
+      },
+      collectionStyleSkus: {
+        'superfamily-sku': {
+          fontStyleSkuIds: ['s1', 's2', 'ds1', 'ds2'],
+          fontStyleIds: ['f1', 'f2', 'df1', 'df2'],
+          childrenSkuIds: ['family-sku', 'display-family-sku'],
+          name: 'Superfamily'
+        },
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2'],
+          fontStyleIds: ['f1', 'f2'],
+          childrenSkuIds: [],
+          name: 'Family'
+        },
+        'display-family-sku': {
+          fontStyleSkuIds: ['ds1', 'ds2'],
+          fontStyleIds: ['df1', 'df2'],
+          childrenSkuIds: [],
+          name: 'Display'
+        }
+      },
+      skuPrices: {
+        'superfamily-sku': 750,
+        'family-sku': 500,
+        'display-family-sku': 500
+      }
+    });
+    const [collId, amount] = (0, _reducer.collectionSkuIdWithDiscount)(state, 'superfamily-sku');
+    (0, _vitest.expect)(collId).toBe('superfamily-sku');
+    (0, _vitest.expect)(amount).toBe(250);
+  });
+  (0, _vitest.it)('prefers bundle at $0 when family is already selected', () => {
+    const state = makeState({
+      selectedSkuIds: {
+        'family-sku': true
+      },
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2'],
+          fontStyleIds: ['f1', 'f2'],
+          childrenSkuIds: [],
+          name: 'Family'
+        },
+        'var-family-sku': {
+          fontStyleSkuIds: ['vs1'],
+          fontStyleIds: ['vf1'],
+          childrenSkuIds: [],
+          name: 'Variable'
+        },
+        'bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-family-sku'],
+          name: 'Bundle'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500,
+        'var-family-sku': 300,
+        'bundle-sku': 500
+      }
+    });
+    const [collId, amount] = (0, _reducer.collectionSkuIdWithDiscount)(state, 'var-family-sku');
+    (0, _vitest.expect)(collId).toBe('bundle-sku');
+    (0, _vitest.expect)(amount).toBe(0);
+  });
+  (0, _vitest.it)('does not upgrade when collection bundle is more expensive', () => {
+    const state = makeState({
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2'],
+          fontStyleIds: ['f1', 'f2'],
+          childrenSkuIds: [],
+          name: 'Family'
+        },
+        'bundle-sku': {
+          fontStyleSkuIds: ['s1', 's2', 'vs1'],
+          fontStyleIds: ['f1', 'f2', 'vf1'],
+          childrenSkuIds: ['family-sku', 'var-family-sku'],
+          name: 'Bundle'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500,
+        'bundle-sku': 600
+      }
+    });
+    const [collId] = (0, _reducer.collectionSkuIdWithDiscount)(state, 'family-sku');
+    (0, _vitest.expect)(collId).toBe('family-sku');
+  });
+  (0, _vitest.it)('returns null when the selected SKU has no price (undefined)', () => {
+    // If skuPrices[skuId] is undefined, the filter comparison
+    // `difference <= undefined` is always false → no collection found
+    const state = makeState({
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1'],
+          fontStyleIds: ['f1'],
+          childrenSkuIds: [],
+          name: 'Family'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500
+      } // s1 deliberately missing
+    });
+    const [collId, amount] = (0, _reducer.collectionSkuIdWithDiscount)(state, 's1');
+    (0, _vitest.expect)(collId).toBe(null);
+    (0, _vitest.expect)(amount).toBe(null);
+  });
+  (0, _vitest.it)('treats collections with missing price as price 0', () => {
+    // A collection with no price entry is treated as $0, meaning its
+    // difference = 0 - sum_selected. With nothing selected, diff = 0.
+    const state = makeState({
+      collectionStyleSkus: {
+        'ghost-bundle': {
+          fontStyleSkuIds: ['s1'],
+          fontStyleIds: ['f1'],
+          childrenSkuIds: ['family-sku'],
+          name: 'Ghost Bundle'
+        },
+        'family-sku': {
+          fontStyleSkuIds: ['s1'],
+          fontStyleIds: ['f1'],
+          childrenSkuIds: [],
+          name: 'Family'
+        }
+      },
+      skuPrices: {
+        'family-sku': 500,
+        s1: 40
+      }
+      // 'ghost-bundle' price deliberately missing → treated as 0
+    });
+    const [collId, amount] = (0, _reducer.collectionSkuIdWithDiscount)(state, 'family-sku');
+    // ghost-bundle diff = 0, family diff = 500. ghost-bundle is cheaper.
+    // 0 <= 500 ✓ → ghost-bundle wins
+    (0, _vitest.expect)(collId).toBe('ghost-bundle');
+    (0, _vitest.expect)(amount).toBe(0);
+  });
+  (0, _vitest.it)('handles zero-price SKUs without errors', () => {
+    const state = makeState({
+      collectionStyleSkus: {
+        'free-family': {
+          fontStyleSkuIds: ['fs1'],
+          fontStyleIds: ['ff1'],
+          childrenSkuIds: [],
+          name: 'Free Family'
+        },
+        'free-bundle': {
+          fontStyleSkuIds: ['fs1', 'fvs1'],
+          fontStyleIds: ['ff1', 'fvf1'],
+          childrenSkuIds: ['free-family', 'free-var'],
+          name: 'Free Bundle'
+        }
+      },
+      skuPrices: {
+        'free-family': 0,
+        'free-bundle': 0,
+        'free-var': 0,
+        fs1: 0,
+        fvs1: 0
+      }
+    });
+
+    // Both have diff = 0, filter: 0 <= 0 ✓, tie-break prefers bundle
+    const [collId, amount] = (0, _reducer.collectionSkuIdWithDiscount)(state, 'free-family');
+    (0, _vitest.expect)(collId).toBe('free-bundle');
+    (0, _vitest.expect)(amount).toBe(0);
+  });
+  (0, _vitest.it)('handles negative difference (collection cheaper than sum of selected)', () => {
+    // Unusual but possible: if prices change or a collection is deeply discounted
+    const state = makeState({
+      selectedSkuIds: {
+        s1: true,
+        s2: true,
+        s3: true
+      },
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4'],
+          childrenSkuIds: [],
+          name: 'Family'
+        }
+      },
+      skuPrices: {
+        'family-sku': 100,
+        s1: 40,
+        s2: 40,
+        s3: 40,
+        s4: 40
+      }
+    });
+
+    // Family costs $100, 3 styles selected = $120, diff = $100 - $120 = -$20
+    // This means the collection is $20 cheaper than what's already selected
+    const [collId, amount] = (0, _reducer.collectionSkuIdWithDiscount)(state, 's4');
+    (0, _vitest.expect)(collId).toBe('family-sku');
+    (0, _vitest.expect)(amount).toBe(-20);
+  });
+});
+
+// =========================================================================
+// reducer SELECT_SKU_ID — core auto-selection
+// =========================================================================
+(0, _vitest.describe)('reducer SELECT_SKU_ID with collection bundles', () => {
+  (0, _vitest.it)('auto-selects collection bundle when selecting a family at the same price', () => {
+    const state = makeThunderState();
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'text-sku',
+      selected: true
+    });
+    (0, _vitest.expect)(newState.selectedSkuIds['text-bundle-sku']).toBe(true);
+    (0, _vitest.expect)(newState.selectedSkuIds['text-sku']).toBe(false);
+    (0, _vitest.expect)(newState.selectedSkuIds['text-var-sku']).toBe(false);
+    (0, _vitest.expect)(newState.selectedSkuIds['text-var-italic-sku']).toBe(false);
+  });
+  (0, _vitest.it)('does not auto-select bundle when bundle is more expensive', () => {
+    const state = makeThunderState({
+      skuPrices: {
+        ...makeThunderState().skuPrices,
+        'text-bundle-sku': 600 // more expensive than text-sku ($500)
+      }
+    });
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'text-sku',
+      selected: true
+    });
+    (0, _vitest.expect)(newState.selectedSkuIds['text-sku']).toBe(true);
+    (0, _vitest.expect)(newState.selectedSkuIds['text-bundle-sku']).toBeUndefined();
+  });
+  (0, _vitest.it)('auto-selects bundle when clicking variable family with static already selected', () => {
+    const state = makeThunderState({
+      selectedSkuIds: {
+        'text-sku': true
+      }
+    });
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'text-var-sku',
+      selected: true
+    });
+    (0, _vitest.expect)(newState.selectedSkuIds['text-bundle-sku']).toBe(true);
+    (0, _vitest.expect)(newState.selectedSkuIds['text-sku']).toBe(false);
+    (0, _vitest.expect)(newState.selectedSkuIds['text-var-sku']).toBe(false);
+  });
+});
+
+// =========================================================================
+// reducer SELECT_SKU_ID — multiple bundles don't interfere
+// =========================================================================
+(0, _vitest.describe)('reducer SELECT_SKU_ID with multiple bundles', () => {
+  (0, _vitest.it)('only selects the correct bundle for the family being clicked', () => {
+    const state = makeThunderState();
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'display-sku',
+      selected: true
+    });
+
+    // Display bundle should be selected
+    (0, _vitest.expect)(newState.selectedSkuIds['display-bundle-sku']).toBe(true);
+    (0, _vitest.expect)(newState.selectedSkuIds['display-sku']).toBe(false);
+    // Text and caption bundles should be untouched
+    (0, _vitest.expect)(newState.selectedSkuIds['text-bundle-sku']).toBeUndefined();
+    (0, _vitest.expect)(newState.selectedSkuIds['caption-bundle-sku']).toBeUndefined();
+  });
+  (0, _vitest.it)('upgrades to superfamily when selecting a second family bundle', () => {
+    // Selecting two families ($500+$500) costs more than the superfamily ($750),
+    // so the system correctly upgrades to the superfamily on the second click
+    const state = makeThunderState();
+    let newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'text-sku',
+      selected: true
+    });
+    (0, _vitest.expect)(newState.selectedSkuIds['text-bundle-sku']).toBe(true);
+    newState = (0, _reducer.default)(newState, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'display-sku',
+      selected: true
+    });
+
+    // Superfamily ($750) beats two bundles ($500 + $500 = $1000)
+    (0, _vitest.expect)(newState.selectedSkuIds['super-sku']).toBe(true);
+    // Previous bundle should be deselected (subsumed by superfamily)
+    (0, _vitest.expect)(newState.selectedSkuIds['text-bundle-sku']).toBe(false);
+    (0, _vitest.expect)(newState.selectedSkuIds['display-bundle-sku']).toBe(false);
+  });
+});
+
+// =========================================================================
+// reducer SELECT_SKU_ID — deselection flow
+// =========================================================================
+(0, _vitest.describe)('reducer deselection', () => {
+  (0, _vitest.it)('deselecting a bundle member deselects the entire bundle', () => {
+    // Start with the text bundle selected (members are false)
+    const state = makeThunderState({
+      selectedSkuIds: {
+        'text-bundle-sku': true,
+        'text-sku': false,
+        'text-var-sku': false,
+        'text-var-italic-sku': false,
+        s1: false,
+        s2: false,
+        vs1: false,
+        vis1: false
+      }
+    });
+
+    // User clicks to deselect "Thunder Text Variable"
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'text-var-sku',
+      selected: false
+    });
+
+    // The bundle should be deselected
+    (0, _vitest.expect)(newState.selectedSkuIds['text-bundle-sku']).toBe(false);
+  });
+  (0, _vitest.it)('deselecting a font style deselects the parent bundle', () => {
+    const state = makeThunderState({
+      selectedSkuIds: {
+        'text-bundle-sku': true,
+        'text-sku': false,
+        'text-var-sku': false,
+        'text-var-italic-sku': false,
+        s1: false,
+        s2: false,
+        vs1: false,
+        vis1: false
+      }
+    });
+
+    // User clicks to deselect individual style "s1"
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 's1',
+      selected: false
+    });
+    (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: {
+        'text-bundle-sku': true,
+        'text-sku': false,
+        'text-var-sku': false,
+        'text-var-italic-sku': false,
+        s1: false,
+        s2: false,
+        vs1: false,
+        vis1: false,
+        'display-bundle-sku': true,
+        'display-sku': false,
+        'display-var-sku': false,
+        'display-var-italic-sku': false,
+        ds1: false,
+        ds2: false,
+        dvs1: false,
+        dvis1: false
+      }
+    });
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'text-var-sku',
+      selected: false
+    });
+    (0, _vitest.expect)(newState.selectedSkuIds['text-bundle-sku']).toBe(false);
+    // Display bundle should be unaffected
+    (0, _vitest.expect)(newState.selectedSkuIds['display-bundle-sku']).toBe(true);
+  });
+});
+
+// =========================================================================
+// reducer SELECT_SKU_ID — re-selection after deselection
+// =========================================================================
+(0, _vitest.describe)('reducer re-selection cycle', () => {
+  (0, _vitest.it)('re-selecting family after bundle was deselected re-selects the bundle', () => {
+    // 1. Start with bundle selected
+    const state = makeThunderState({
+      selectedSkuIds: {
+        'text-bundle-sku': true,
+        'text-sku': false,
+        'text-var-sku': false,
+        'text-var-italic-sku': false,
+        s1: false,
+        s2: false,
+        vs1: false,
+        vis1: false
+      }
+    });
+
+    // 2. Deselect a member → bundle goes away
+    const afterDeselect = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'text-var-sku',
+      selected: false
+    });
+    (0, _vitest.expect)(afterDeselect.selectedSkuIds['text-bundle-sku']).toBe(false);
+
+    // 3. Re-select the family → bundle should come back
+    const afterReselect = (0, _reducer.default)(afterDeselect, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'text-sku',
+      selected: true
+    });
+    (0, _vitest.expect)(afterReselect.selectedSkuIds['text-bundle-sku']).toBe(true);
+    (0, _vitest.expect)(afterReselect.selectedSkuIds['text-sku']).toBe(false);
+    (0, _vitest.expect)(afterReselect.selectedSkuIds['text-var-sku']).toBe(false);
+  });
+});
+
+// =========================================================================
+// reducer SELECT_SKU_ID — superfamily upgrade
+// =========================================================================
+(0, _vitest.describe)('reducer superfamily upgrade', () => {
+  (0, _vitest.it)('upgrades to superfamily when cumulative selections make it cheaper', () => {
+    // With two bundles selected ($500 each = $1000 total), the superfamily
+    // at $750 should be a better deal when selecting the third family
+    const state = makeThunderState({
+      selectedSkuIds: {
+        'text-bundle-sku': true,
+        'text-sku': false,
+        'text-var-sku': false,
+        'text-var-italic-sku': false,
+        s1: false,
+        s2: false,
+        vs1: false,
+        vis1: false,
+        'display-bundle-sku': true,
+        'display-sku': false,
+        'display-var-sku': false,
+        'display-var-italic-sku': false,
+        ds1: false,
+        ds2: false,
+        dvs1: false,
+        dvis1: false
+      }
+    });
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'caption-sku',
+      selected: true
+    });
+
+    // Superfamily ($750) - two bundles ($500+$500) = -$250 difference
+    // Caption-sku costs $500, so -$250 <= $500 → superfamily is preferred
+    (0, _vitest.expect)(newState.selectedSkuIds['super-sku']).toBe(true);
+  });
+});
+
+// =========================================================================
+// reducer SELECT_SKU_ID — individual style to family upgrade
+// =========================================================================
+(0, _vitest.describe)('reducer individual style upgrade', () => {
+  (0, _vitest.it)('upgrades to family when enough styles are individually selected', () => {
+    const state = makeState({
+      selectedSkuIds: {
+        s1: true,
+        s2: true,
+        s3: true,
+        s4: true
+      },
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Family'
+        }
+      },
+      skuPrices: {
+        'family-sku': 200,
+        s1: 40,
+        s2: 40,
+        s3: 40,
+        s4: 40,
+        s5: 40
+      }
+    });
+
+    // Family is $200, 4 selected = $160, diff = $40. Style s5 costs $40.
+    // $40 <= $40 → family is a better deal
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 's5',
+      selected: true
+    });
+    (0, _vitest.expect)(newState.selectedSkuIds['family-sku']).toBe(true);
+    // Individual styles should be deselected (included via family)
+    (0, _vitest.expect)(newState.selectedSkuIds['s1']).toBe(false);
+    (0, _vitest.expect)(newState.selectedSkuIds['s5']).toBe(false);
+  });
+  (0, _vitest.it)('does not upgrade to family when not yet cost-effective', () => {
+    const state = makeState({
+      selectedSkuIds: {
+        s1: true
+      },
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1', 's2', 's3', 's4', 's5'],
+          fontStyleIds: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          childrenSkuIds: [],
+          name: 'Family'
+        }
+      },
+      skuPrices: {
+        'family-sku': 200,
+        s1: 40,
+        s2: 40,
+        s3: 40,
+        s4: 40,
+        s5: 40
+      }
+    });
+
+    // Family is $200, 1 selected = $40, diff = $160. Style s2 costs $40.
+    // $160 > $40 → not worth upgrading
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 's2',
+      selected: true
+    });
+    (0, _vitest.expect)(newState.selectedSkuIds['family-sku']).toBeUndefined();
+    (0, _vitest.expect)(newState.selectedSkuIds['s1']).toBe(true);
+    (0, _vitest.expect)(newState.selectedSkuIds['s2']).toBe(true);
+  });
+});
+
+// =========================================================================
+// reducer SELECT_SKU_ID — edge cases with missing data
+// =========================================================================
+(0, _vitest.describe)('reducer edge cases', () => {
+  (0, _vitest.it)('handles selection when collectionStyleSkus is empty', () => {
+    const state = makeState({
+      skuPrices: {
+        'some-sku': 100
+      }
+    });
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'some-sku',
+      selected: true
+    });
+    (0, _vitest.expect)(newState.selectedSkuIds['some-sku']).toBe(true);
+  });
+  (0, _vitest.it)('handles selection when skuPrices is empty', () => {
+    const state = makeState({
+      collectionStyleSkus: {
+        'family-sku': {
+          fontStyleSkuIds: ['s1'],
+          fontStyleIds: ['f1'],
+          childrenSkuIds: [],
+          name: 'Family'
+        }
+      }
+    });
+
+    // No prices → no collection upgrade possible, just select directly
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 's1',
+      selected: true
+    });
+    (0, _vitest.expect)(newState.selectedSkuIds['s1']).toBe(true);
+    (0, _vitest.expect)(newState.selectedSkuIds['family-sku']).toBeUndefined();
+  });
+  (0, _vitest.it)('re-selecting a bundle member may upgrade to superfamily', () => {
+    // When the text bundle is selected and the user clicks text-sku (a member),
+    // the system re-evaluates: the superfamily sees the text bundle ($500) as
+    // already selected, making its difference only $250 — cheaper than text-sku
+    // at $500. So it upgrades to the superfamily.
+    //
+    // This is a documented consequence of the greedy price-optimization: every
+    // SELECT_SKU_ID re-evaluates the cheapest collection, even for members
+    // that are already effectively selected.
+    const state = makeThunderState({
+      selectedSkuIds: {
+        'text-bundle-sku': true,
+        'text-sku': false,
+        'text-var-sku': false,
+        'text-var-italic-sku': false,
+        s1: false,
+        s2: false,
+        vs1: false,
+        vis1: false
+      }
+    });
+    const newState = (0, _reducer.default)(state, {
+      type: 'SELECT_SKU_ID',
+      skuId: 'text-sku',
+      selected: true
+    });
+    (0, _vitest.expect)(newState.selectedSkuIds['super-sku']).toBe(true);
+    (0, _vitest.expect)(newState.selectedSkuIds['text-bundle-sku']).toBe(false);
+  });
+  (0, _vitest.it)('UNSELECT_SKUS clears all selections cleanly', () => {
+    const state = makeThunderState({
+      selectedSkuIds: {
+        'text-bundle-sku': true,
+        'text-sku': false,
+        'text-var-sku': false
+      }
+    });
+    const newState = (0, _reducer.default)(state, {
+      type: 'UNSELECT_SKUS'
+    });
+    (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(overrides = {}) {
+    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');
+  });
+});