fontdue-js 3.6.0 → 3.7.0

package/dist/__tests__/collectionBundleSelection.test.js

@@ -5,21 +5,30 @@ vi.mock('react-relay', () => ({
   graphql: () => null,
   fetchQuery: vi.fn()
 }));
-import { collectionSkuIdsDifferences, collContainsSkuId, isSelected } from '../utils.js';
-import { collectionSkuIdWithDiscount } from '../reducer.js';
-import reducer from '../reducer.js';
+import reducer, { isSelected } from '../reducer.js';
+import { additionalCost, cheapestSkuIds } from '../selection.js';
+
+// A catalog as the selection sees it: each SKU's [price, styles it grants],
+// the price undefined when not known.
 
-// Helper to build a minimal FontdueState for testing
 function makeState() {
-  let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let catalog = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let overrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const skuStyleIds = {};
+  const skuPrices = {};
+  for (const [skuId, [price, styleIds]] of Object.entries(catalog)) {
+    skuStyleIds[skuId] = styleIds;
+    if (price !== undefined) skuPrices[skuId] = price;
+  }
   return {
     cartOpen: false,
     precartOpen: false,
     selectedSkuIds: {},
+    requestedSkuIds: [],
     licenseOptions: [],
-    collectionStyleSkus: {},
+    skuStyleIds,
     collectionSkus: {},
-    skuPrices: {},
+    skuPrices,
     fetchedCollectionIds: [],
     storeModalRoute: {
       name: 'index'
@@ -30,739 +39,162 @@ function makeState() {
     ...overrides
   };
 }
+const select = function (state) {
+  for (var _len = arguments.length, skuIds = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    skuIds[_key - 1] = arguments[_key];
+  }
+  return skuIds.reduce((current, skuId) => reducer(current, {
+    type: 'SELECT_SKU_ID',
+    skuId,
+    selected: true
+  }), state);
+};
+const deselect = (state, skuId) => reducer(state, {
+  type: 'SELECT_SKU_ID',
+  skuId,
+  selected: false
+});
+const selected = state => Object.keys(state.selectedSkuIds).filter(skuId => state.selectedSkuIds[skuId] === true).sort();
 
 // ---------------------------------------------------------------------------
-// Shared fixtures — reusable across tests that need the full
-// "superfamily + 3 families + 3 bundles" topology
+// Shared fixture – a superfamily of three families, each with a variable
+// upright and italic, and a collection bundle of the family and its variables
+// priced like the family alone.
 // ---------------------------------------------------------------------------
-function makeThunderState() {
-  let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  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
-// =========================================================================
-describe('collContainsSkuId', () => {
-  it('returns true when skuId is in childrenSkuIds', () => {
-    const coll = {
-      fontStyleSkuIds: [],
-      fontStyleIds: [],
-      childrenSkuIds: ['child-sku-1', 'child-sku-2'],
-      name: 'Test'
-    };
-    expect(collContainsSkuId(coll, 'child-sku-1')).toBe(true);
-  });
-  it('returns true when skuId is in fontStyleSkuIds', () => {
-    const coll = {
-      fontStyleSkuIds: ['style-sku-1'],
-      fontStyleIds: [],
-      childrenSkuIds: [],
-      name: 'Test'
-    };
-    expect(collContainsSkuId(coll, 'style-sku-1')).toBe(true);
-  });
-  it('returns true when id is in fontStyleIds', () => {
-    const coll = {
-      fontStyleSkuIds: [],
-      fontStyleIds: ['style-id-1'],
-      childrenSkuIds: [],
-      name: 'Test'
-    };
-    expect(collContainsSkuId(coll, 'style-id-1')).toBe(true);
-  });
-  it('returns false for unknown skuId', () => {
-    const coll = {
-      fontStyleSkuIds: ['style-sku-1'],
-      fontStyleIds: ['style-1'],
-      childrenSkuIds: ['child-sku-1'],
-      name: 'Test'
-    };
-    expect(collContainsSkuId(coll, 'unknown-sku')).toBe(false);
-  });
-  it('returns false for undefined collection', () => {
-    expect(collContainsSkuId(undefined, 'any-sku')).toBe(false);
-  });
-});
+const THUNDER = {
+  'super-sku': [750, ['f1', 'f2', 'df1', 'df2', 'cf1', 'cf2', 'vf1', 'vif1', 'dvf1', 'dvif1', 'cvf1', 'cvif1']],
+  'text-sku': [500, ['f1', 'f2']],
+  'display-sku': [500, ['df1', 'df2']],
+  'caption-sku': [500, ['cf1', 'cf2']],
+  'text-var-sku': [300, ['vf1']],
+  'text-var-italic-sku': [300, ['vif1']],
+  'display-var-sku': [300, ['dvf1']],
+  'display-var-italic-sku': [300, ['dvif1']],
+  'caption-var-sku': [300, ['cvf1']],
+  'caption-var-italic-sku': [300, ['cvif1']],
+  'text-bundle-sku': [500, ['f1', 'f2', 'vf1', 'vif1']],
+  'display-bundle-sku': [500, ['df1', 'df2', 'dvf1', 'dvif1']],
+  'caption-bundle-sku': [500, ['cf1', 'cf2', 'cvf1', 'cvif1']],
+  s1: [40, ['f1']],
+  s2: [40, ['f2']],
+  ds1: [40, ['df1']],
+  ds2: [40, ['df2']],
+  cs1: [40, ['cf1']],
+  cs2: [40, ['cf2']],
+  vs1: [40, ['vf1']],
+  vis1: [40, ['vif1']],
+  dvs1: [40, ['dvf1']],
+  dvis1: [40, ['dvif1']],
+  cvs1: [40, ['cvf1']],
+  cvis1: [40, ['cvif1']]
+};
+const makeThunderState = function () {
+  let prices = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return makeState(Object.fromEntries(Object.entries(THUNDER).map(_ref => {
+    let [skuId, [price, styleIds]] = _ref;
+    return [skuId, [prices[skuId] ?? price, styleIds]];
+  })));
+};
+
+// A family of five uprights and five italics, sold whole, as upright and
+// italic packages, or by the style.
+const FAMILY_WITH_PACKAGES = {
+  'family-sku': [500, ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5']],
+  'pkg-upright-sku': [250, ['f1', 'f2', 'f3', 'f4', 'f5']],
+  'pkg-italic-sku': [250, ['fi1', 'fi2', 'fi3', 'fi4', 'fi5']],
+  s1: [100, ['f1']],
+  s2: [100, ['f2']],
+  s3: [100, ['f3']],
+  s4: [100, ['f4']],
+  s5: [100, ['f5']],
+  si1: [100, ['fi1']],
+  si2: [100, ['fi2']],
+  si3: [100, ['fi3']],
+  si4: [100, ['fi4']],
+  si5: [100, ['fi5']]
+};
 
 // =========================================================================
 // isSelected
 // =========================================================================
 describe('isSelected', () => {
   it('returns true when the SKU is directly selected', () => {
-    const state = makeState({
+    const state = makeState({}, {
       selectedSkuIds: {
         'sku-1': true
       }
     });
     expect(isSelected('sku-1')(state)).toBe(true);
   });
-  it('returns false when the SKU is explicitly deselected (false)', () => {
-    const state = makeState({
-      selectedSkuIds: {
-        'sku-1': false
-      }
-    });
-    expect(isSelected('sku-1')(state)).toBe(false);
+  it('returns false when the SKU is not selected', () => {
+    expect(isSelected('sku-1')(makeState())).toBe(false);
   });
-  it('returns true when a parent collection is selected', () => {
+  it('returns true when every style it grants is granted by the selection', () => {
     const state = makeState({
+      'bundle-sku': [300, ['f1', 'f2']],
+      'family-sku': [500, ['f1']],
+      s1: [100, ['f1']]
+    }, {
       selectedSkuIds: {
         'bundle-sku': true
-      },
-      collectionStyleSkus: {
-        'bundle-sku': {
-          fontStyleSkuIds: ['s1'],
-          fontStyleIds: ['f1'],
-          childrenSkuIds: ['family-sku'],
-          name: 'Bundle'
-        }
       }
     });
-    // Style SKU contained via fontStyleSkuIds
     expect(isSelected('s1')(state)).toBe(true);
-    // Family SKU contained via childrenSkuIds
     expect(isSelected('family-sku')(state)).toBe(true);
-    // Font style ID contained via fontStyleIds
+    // A style with no SKU of its own, by its style id
     expect(isSelected('f1')(state)).toBe(true);
   });
-  it('returns false when a parent collection is deselected', () => {
+  it('returns false when only some of its styles are selected', () => {
     const state = makeState({
+      'family-sku': [500, ['f1', 'f2']],
+      s1: [100, ['f1']]
+    }, {
       selectedSkuIds: {
-        'bundle-sku': false,
-        's1': false
-      },
-      collectionStyleSkus: {
-        'bundle-sku': {
-          fontStyleSkuIds: ['s1'],
-          fontStyleIds: ['f1'],
-          childrenSkuIds: ['family-sku'],
-          name: 'Bundle'
-        }
+        s1: true
       }
     });
-    expect(isSelected('s1')(state)).toBe(false);
     expect(isSelected('family-sku')(state)).toBe(false);
   });
   it('returns false for null skuId', () => {
-    const state = makeState();
-    expect(isSelected(null)(state)).toBe(false);
-  });
-  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'
-        }
-      }
-    });
-    expect(isSelected('family-sku')(state)).toBe(true);
-    expect(isSelected('var-sku')(state)).toBe(true);
-    expect(isSelected('s1')(state)).toBe(true);
-  });
-});
-
-// =========================================================================
-// collectionSkuIdsDifferences
-// =========================================================================
-describe('collectionSkuIdsDifferences', () => {
-  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 = collectionSkuIdsDifferences(state, 'family-sku');
-    expect(diffs).toHaveProperty('family-sku');
-    expect(diffs['family-sku']).toBe(500);
-  });
-  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 = collectionSkuIdsDifferences(state, 'family-sku');
-    expect(diffs).toHaveProperty('family-sku');
-    expect(diffs).toHaveProperty('bundle-sku');
-  });
-  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 = collectionSkuIdsDifferences(state, 'var-family-sku');
-    expect(diffs['bundle-sku']).toBe(0);
-  });
-  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 = collectionSkuIdsDifferences(state, 'orphan-sku');
-    // Missing price treated as 0, so difference = 500 - 0 = 500
-    expect(diffs['family-sku']).toBe(500);
-  });
-  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 = collectionSkuIdsDifferences(state, 'family-sku');
-    // family-sku is false, not true, so it shouldn't be subtracted
-    expect(diffs['bundle-sku']).toBe(500);
-  });
-  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 = collectionSkuIdsDifferences(state, 'lonely-style');
-    expect(Object.keys(diffs)).toHaveLength(0);
+    expect(isSelected(null)(makeState())).toBe(false);
   });
 });
 
 // =========================================================================
-// collectionSkuIdWithDiscount
+// additionalCost – the “+$X” next to what isn't selected
 // =========================================================================
-describe('collectionSkuIdWithDiscount', () => {
-  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] = collectionSkuIdWithDiscount(state, 's1');
-    expect(collId).toBe(null);
-    expect(amount).toBe(null);
-  });
-  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] = collectionSkuIdWithDiscount(state, 's5');
-    expect(collId).toBe('family-sku');
-    expect(amount).toBe(40);
-  });
-  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] = collectionSkuIdWithDiscount(state, 'family-sku');
-    expect(collId).toBe('bundle-sku');
-    expect(amount).toBe(500);
-  });
-  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] = collectionSkuIdWithDiscount(state, 'family-sku');
-    expect(collId).toBe('bundle-sku');
-  });
-  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] = collectionSkuIdWithDiscount(state, 'superfamily-sku');
-    expect(collId).toBe('superfamily-sku');
-    expect(amount).toBe(250);
-  });
-  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] = collectionSkuIdWithDiscount(state, 'var-family-sku');
-    expect(collId).toBe('bundle-sku');
-    expect(amount).toBe(0);
+describe('additionalCost', () => {
+  const FIVE_STYLES = {
+    'family-sku': [150, ['f1', 'f2', 'f3', 'f4', 'f5']],
+    s1: [40, ['f1']],
+    s2: [40, ['f2']],
+    s3: [40, ['f3']],
+    s4: [40, ['f4']],
+    s5: [40, ['f5']]
+  };
+  it('is the SKU’s own price when nothing cheaper holds it', () => {
+    expect(additionalCost(select(makeState(FIVE_STYLES), 's1'), 's2')).toBe(40);
   });
-  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] = collectionSkuIdWithDiscount(state, 'family-sku');
-    expect(collId).toBe('family-sku');
+  it('is what completing a cheaper bundle adds', () => {
+    // Three styles selected (120); the family (150) holds a fourth for 30 more
+    expect(additionalCost(select(makeState(FIVE_STYLES), 's1', 's2', 's3'), 's4')).toBe(30);
   });
-  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] = collectionSkuIdWithDiscount(state, 's1');
-    expect(collId).toBe(null);
-    expect(amount).toBe(null);
+  it('is zero for what the selection already holds', () => {
+    expect(additionalCost(select(makeState(FIVE_STYLES), 'family-sku'), 's1')).toBe(0);
   });
-  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.
+  it('is null when the SKU’s price or styles are unknown', () => {
     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
+      'unpriced-sku': [undefined, ['f1']]
     });
-    const [collId, amount] = collectionSkuIdWithDiscount(state, 'family-sku');
-    // ghost-bundle diff = 0, family diff = 500. ghost-bundle is cheaper.
-    // 0 <= 500 ✓ → ghost-bundle wins
-    expect(collId).toBe('ghost-bundle');
-    expect(amount).toBe(0);
+    expect(additionalCost(state, 'unpriced-sku')).toBeNull();
+    expect(additionalCost(state, 'unknown-sku')).toBeNull();
   });
-  it('handles zero-price SKUs without errors', () => {
+  it('handles zero-price SKUs', () => {
     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
-      }
+      'free-sku': [0, ['f1']],
+      s2: [40, ['f2']]
     });
-
-    // Both have diff = 0, filter: 0 <= 0 ✓, tie-break prefers bundle
-    const [collId, amount] = collectionSkuIdWithDiscount(state, 'free-family');
-    expect(collId).toBe('free-bundle');
-    expect(amount).toBe(0);
-  });
-  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] = collectionSkuIdWithDiscount(state, 's4');
-    expect(collId).toBe('family-sku');
-    expect(amount).toBe(-20);
+    expect(additionalCost(select(state, 's2'), 'free-sku')).toBe(0);
   });
 });
 
@@ -771,46 +203,25 @@ describe('collectionSkuIdWithDiscount', () => {
 // =========================================================================
 describe('reducer SELECT_SKU_ID with collection bundles', () => {
   it('auto-selects collection bundle when selecting a family at the same price', () => {
-    const state = makeThunderState();
-    const newState = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'text-sku',
-      selected: true
-    });
-    expect(newState.selectedSkuIds['text-bundle-sku']).toBe(true);
-    expect(newState.selectedSkuIds['text-sku']).toBe(false);
-    expect(newState.selectedSkuIds['text-var-sku']).toBe(false);
-    expect(newState.selectedSkuIds['text-var-italic-sku']).toBe(false);
+    expect(selected(select(makeThunderState(), 'text-sku'))).toEqual(['text-bundle-sku']);
   });
   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)
-      }
+      'text-bundle-sku': 600
     });
-    const newState = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'text-sku',
-      selected: true
-    });
-    expect(newState.selectedSkuIds['text-sku']).toBe(true);
-    expect(newState.selectedSkuIds['text-bundle-sku']).toBeUndefined();
+    expect(selected(select(state, 'text-sku'))).toEqual(['text-sku']);
   });
   it('auto-selects bundle when clicking variable family with static already selected', () => {
+    expect(selected(select(makeThunderState(), 'text-sku', 'text-var-sku'))).toEqual(['text-bundle-sku']);
+  });
+  it('never splits a pick into cheaper parts', () => {
+    // The styles cost 80 together, but a family bought is not the same
+    // purchase as today's styles bought one by one
     const state = makeThunderState({
-      selectedSkuIds: {
-        'text-sku': true
-      }
+      'text-bundle-sku': 600,
+      'super-sku': 2000
     });
-    const newState = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'text-var-sku',
-      selected: true
-    });
-    expect(newState.selectedSkuIds['text-bundle-sku']).toBe(true);
-    expect(newState.selectedSkuIds['text-sku']).toBe(false);
-    expect(newState.selectedSkuIds['text-var-sku']).toBe(false);
+    expect(selected(select(state, 'text-sku'))).toEqual(['text-sku']);
   });
 });
 
@@ -819,41 +230,45 @@ describe('reducer SELECT_SKU_ID with collection bundles', () => {
 // =========================================================================
 describe('reducer SELECT_SKU_ID with multiple bundles', () => {
   it('only selects the correct bundle for the family being clicked', () => {
-    const state = makeThunderState();
-    const newState = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'display-sku',
-      selected: true
-    });
-
-    // Display bundle should be selected
-    expect(newState.selectedSkuIds['display-bundle-sku']).toBe(true);
-    expect(newState.selectedSkuIds['display-sku']).toBe(false);
-    // Text and caption bundles should be untouched
-    expect(newState.selectedSkuIds['text-bundle-sku']).toBeUndefined();
-    expect(newState.selectedSkuIds['caption-bundle-sku']).toBeUndefined();
+    expect(selected(select(makeThunderState(), 'display-sku'))).toEqual(['display-bundle-sku']);
   });
   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 = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'text-sku',
-      selected: true
-    });
-    expect(newState.selectedSkuIds['text-bundle-sku']).toBe(true);
-    newState = reducer(newState, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'display-sku',
-      selected: true
-    });
+    // Two families ($500 + $500) cost more than the superfamily ($750)
+    expect(selected(select(makeThunderState(), 'text-sku', 'display-sku'))).toEqual(['super-sku']);
+  });
+});
 
-    // Superfamily ($750) beats two bundles ($500 + $500 = $1000)
-    expect(newState.selectedSkuIds['super-sku']).toBe(true);
-    // Previous bundle should be deselected (subsumed by superfamily)
-    expect(newState.selectedSkuIds['text-bundle-sku']).toBe(false);
-    expect(newState.selectedSkuIds['display-bundle-sku']).toBe(false);
+// =========================================================================
+// reducer SELECT_SKU_ID — order independence (FD-1238)
+// =========================================================================
+describe('reducer selection does not depend on click order', () => {
+  // Overlapping style bundles: every pair of the three uprights, each upright
+  // with its italic, and the three uprights together
+  const OVERLAPPING = {
+    light: [90, ['light']],
+    regular: [90, ['regular']],
+    bold: [90, ['bold']],
+    italic: [90, ['italic']],
+    'bold-italic': [90, ['bold-italic']],
+    'light+regular': [153, ['light', 'regular']],
+    'light+bold': [153, ['light', 'bold']],
+    'regular+bold': [153, ['regular', 'bold']],
+    'regular+italic': [144, ['regular', 'italic']],
+    'bold+bold-italic': [144, ['bold', 'bold-italic']],
+    'light+regular+bold': [202.5, ['light', 'regular', 'bold']]
+  };
+  it('reaches a triple that every pair inside it would otherwise snap to first', () => {
+    const state = makeState(OVERLAPPING);
+    expect(selected(select(state, 'bold', 'regular', 'light'))).toEqual(['light+regular+bold']);
+    expect(selected(select(state, 'light', 'regular', 'bold'))).toEqual(['light+regular+bold']);
+  });
+  it('re-partitions a pair when a cheaper split appears', () => {
+    const state = makeState(OVERLAPPING);
+    expect(selected(select(state, 'bold', 'regular', 'bold-italic', 'italic'))).toEqual(['bold+bold-italic', 'regular+italic']);
+  });
+  it('deselecting a style keeps the rest of its bundle', () => {
+    const state = select(makeState(OVERLAPPING), 'bold', 'regular', 'light');
+    expect(selected(deselect(state, 'regular'))).toEqual(['light+bold']);
   });
 });
 
@@ -862,161 +277,61 @@ describe('reducer SELECT_SKU_ID with multiple bundles', () => {
 // =========================================================================
 describe('reducer deselection', () => {
   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 = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'text-var-sku',
-      selected: false
-    });
+    const state = select(makeThunderState(), 'text-sku');
+    expect(selected(state)).toEqual(['text-bundle-sku']);
 
-    // The bundle should be deselected
-    expect(newState.selectedSkuIds['text-bundle-sku']).toBe(false);
+    // The variable comes free with the bundle, so taking it out alone would
+    // change nothing: the bundle goes
+    expect(selected(deselect(state, 'text-var-sku'))).toEqual([]);
   });
   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 = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 's1',
-      selected: false
-    });
-    expect(newState.selectedSkuIds['text-bundle-sku']).toBe(false);
+    const state = select(makeThunderState(), 'text-sku');
+    const after = deselect(state, 's1');
+    expect(selected(after)).toEqual([]);
+    expect(isSelected('s1')(after)).toBe(false);
+  });
+  it('deselecting a style a cheaper family still holds deselects the family', () => {
+    const catalog = {
+      'family-sku': [200, ['f1', 'f2', 'f3', 'f4', 'f5']],
+      s1: [50, ['f1']],
+      s2: [50, ['f2']],
+      s3: [50, ['f3']],
+      s4: [50, ['f4']],
+      s5: [50, ['f5']]
+    };
+    const state = select(makeState(catalog), 's1', 's2', 's3', 's4', 's5');
+    expect(selected(state)).toEqual(['family-sku']);
+    // Without s5 the family still costs no more than four styles, so it would
+    // stay selected – the click takes the family out instead
+    expect(selected(deselect(state, 's5'))).toEqual([]);
   });
   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
+    const state = select(makeState({
+      'coll-bundle-sku': [500, ['f1', 'f2', 'fi1', 'fi2', 'vf1']],
+      'family-sku': [500, ['f1', 'f2', 'fi1', 'fi2']],
+      'var-sku': [300, ['vf1']],
+      'pkg-upright-sku': [250, ['f1', 'f2']],
+      'pkg-italic-sku': [250, ['fi1', 'fi2']],
+      s1: [100, ['f1']],
+      s2: [100, ['f2']],
+      si1: [100, ['fi1']],
+      si2: [100, ['fi2']],
+      vs1: [100, ['vf1']]
+    }), 'family-sku');
+    expect(selected(state)).toEqual(['coll-bundle-sku']);
     expect(isSelected('pkg-upright-sku')(state)).toBe(true);
-
-    // Click to deselect the bundle
-    const newState = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'pkg-upright-sku',
-      selected: false
-    });
-
-    // Collection bundle should be deselected
-    expect(newState.selectedSkuIds['coll-bundle-sku']).toBe(false);
-    // Nothing should be selected anymore
-    expect(isSelected('pkg-upright-sku')(newState)).toBe(false);
-    expect(isSelected('family-sku')(newState)).toBe(false);
-    expect(isSelected('s1')(newState)).toBe(false);
+    const after = deselect(state, 'pkg-upright-sku');
+    expect(selected(after)).toEqual([]);
+    expect(isSelected('pkg-upright-sku')(after)).toBe(false);
+    expect(isSelected('family-sku')(after)).toBe(false);
+    expect(isSelected('s1')(after)).toBe(false);
   });
   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 = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'text-var-sku',
-      selected: false
-    });
-    expect(newState.selectedSkuIds['text-bundle-sku']).toBe(false);
-    // Display bundle should be unaffected
-    expect(newState.selectedSkuIds['display-bundle-sku']).toBe(true);
+    const state = select(makeThunderState({
+      'super-sku': 2000
+    }), 'text-sku', 'display-sku');
+    expect(selected(state)).toEqual(['display-bundle-sku', 'text-bundle-sku']);
+    expect(selected(deselect(state, 'text-var-sku'))).toEqual(['display-bundle-sku']);
   });
 });
 
@@ -1025,37 +340,10 @@ describe('reducer deselection', () => {
 // =========================================================================
 describe('reducer re-selection cycle', () => {
   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 = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'text-var-sku',
-      selected: false
-    });
-    expect(afterDeselect.selectedSkuIds['text-bundle-sku']).toBe(false);
-
-    // 3. Re-select the family → bundle should come back
-    const afterReselect = reducer(afterDeselect, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'text-sku',
-      selected: true
-    });
-    expect(afterReselect.selectedSkuIds['text-bundle-sku']).toBe(true);
-    expect(afterReselect.selectedSkuIds['text-sku']).toBe(false);
-    expect(afterReselect.selectedSkuIds['text-var-sku']).toBe(false);
+    const state = select(makeThunderState(), 'text-sku');
+    const afterDeselect = deselect(state, 'text-var-sku');
+    expect(selected(afterDeselect)).toEqual([]);
+    expect(selected(select(afterDeselect, 'text-sku'))).toEqual(['text-bundle-sku']);
   });
 });
 
@@ -1064,37 +352,12 @@ describe('reducer re-selection cycle', () => {
 // =========================================================================
 describe('reducer superfamily upgrade', () => {
   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 = reducer(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
-    expect(newState.selectedSkuIds['super-sku']).toBe(true);
+    const state = select(makeThunderState({
+      'super-sku': 1200
+    }), 'text-sku', 'display-sku');
+    expect(selected(state)).toEqual(['display-bundle-sku', 'text-bundle-sku']);
+    // A third $500 bundle would make $1,500
+    expect(selected(select(state, 'caption-sku'))).toEqual(['super-sku']);
   });
 });
 
@@ -1102,77 +365,21 @@ describe('reducer superfamily upgrade', () => {
 // reducer SELECT_SKU_ID — individual style to family upgrade
 // =========================================================================
 describe('reducer individual style upgrade', () => {
+  const FAMILY = {
+    'family-sku': [200, ['f1', 'f2', 'f3', 'f4', 'f5']],
+    s1: [40, ['f1']],
+    s2: [40, ['f2']],
+    s3: [40, ['f3']],
+    s4: [40, ['f4']],
+    s5: [40, ['f5']]
+  };
   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 = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 's5',
-      selected: true
-    });
-    expect(newState.selectedSkuIds['family-sku']).toBe(true);
-    // Individual styles should be deselected (included via family)
-    expect(newState.selectedSkuIds['s1']).toBe(false);
-    expect(newState.selectedSkuIds['s5']).toBe(false);
+    const state = select(makeState(FAMILY), 's1', 's2', 's3', 's4', 's5');
+    expect(selected(state)).toEqual(['family-sku']);
+    expect(isSelected('s1')(state)).toBe(true);
   });
   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 = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 's2',
-      selected: true
-    });
-    expect(newState.selectedSkuIds['family-sku']).toBeUndefined();
-    expect(newState.selectedSkuIds['s1']).toBe(true);
-    expect(newState.selectedSkuIds['s2']).toBe(true);
+    expect(selected(select(makeState(FAMILY), 's1', 's2'))).toEqual(['s1', 's2']);
   });
 });
 
@@ -1180,81 +387,32 @@ describe('reducer individual style upgrade', () => {
 // reducer SELECT_SKU_ID — edge cases with missing data
 // =========================================================================
 describe('reducer edge cases', () => {
-  it('handles selection when collectionStyleSkus is empty', () => {
-    const state = makeState({
+  it('selects a SKU whose styles aren’t known as it is', () => {
+    const state = makeState({}, {
       skuPrices: {
         'some-sku': 100
       }
     });
-    const newState = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'some-sku',
-      selected: true
-    });
-    expect(newState.selectedSkuIds['some-sku']).toBe(true);
+    expect(selected(select(state, 'some-sku'))).toEqual(['some-sku']);
   });
-  it('handles selection when skuPrices is empty', () => {
+  it('selects a SKU whose price isn’t known as it is', () => {
     const state = makeState({
-      collectionStyleSkus: {
-        'family-sku': {
-          fontStyleSkuIds: ['s1'],
-          fontStyleIds: ['f1'],
-          childrenSkuIds: [],
-          name: 'Family'
-        }
-      }
+      'family-sku': [undefined, ['f1']],
+      s1: [undefined, ['f1']]
     });
-
-    // No prices → no collection upgrade possible, just select directly
-    const newState = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 's1',
-      selected: true
-    });
-    expect(newState.selectedSkuIds['s1']).toBe(true);
-    expect(newState.selectedSkuIds['family-sku']).toBeUndefined();
+    expect(selected(select(state, 's1'))).toEqual(['s1']);
   });
-  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 = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'text-sku',
-      selected: true
-    });
-    expect(newState.selectedSkuIds['super-sku']).toBe(true);
-    expect(newState.selectedSkuIds['text-bundle-sku']).toBe(false);
+  it('re-picking something already held changes nothing', () => {
+    const state = select(makeThunderState(), 'text-sku');
+    expect(select(state, 'text-sku').selectedSkuIds).toBe(state.selectedSkuIds);
+    expect(selected(select(state, 's1'))).toEqual(['text-bundle-sku']);
   });
   it('UNSELECT_SKUS clears all selections cleanly', () => {
-    const state = makeThunderState({
-      selectedSkuIds: {
-        'text-bundle-sku': true,
-        'text-sku': false,
-        'text-var-sku': false
-      }
-    });
-    const newState = reducer(state, {
+    const state = reducer(select(makeThunderState(), 'text-sku'), {
       type: 'UNSELECT_SKUS'
     });
-    expect(Object.keys(newState.selectedSkuIds)).toHaveLength(0);
+    expect(selected(state)).toEqual([]);
+    expect(state.requestedSkuIds).toEqual([]);
   });
 });
 
@@ -1262,371 +420,208 @@ describe('reducer edge cases', () => {
 // isSelected — family bundles (style packages within a family)
 // =========================================================================
 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
-    });
-  }
+  const WITH_COLLECTION_BUNDLE = {
+    ...FAMILY_WITH_PACKAGES,
+    'coll-bundle-sku': [500, ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5', 'vf1']],
+    'var-sku': [300, ['vf1']],
+    vs1: [100, ['vf1']]
+  };
   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
-      }
-    });
+    const state = select(makeState(FAMILY_WITH_PACKAGES), 'family-sku');
+    expect(selected(state)).toEqual(['family-sku']);
     expect(isSelected('pkg-upright-sku')(state)).toBe(true);
     expect(isSelected('pkg-italic-sku')(state)).toBe(true);
     expect(isSelected('s1')(state)).toBe(true);
     expect(isSelected('si1')(state)).toBe(true);
   });
   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)
+    const state = select(makeState(WITH_COLLECTION_BUNDLE), 'family-sku');
+    expect(selected(state)).toEqual(['coll-bundle-sku']);
     expect(isSelected('family-sku')(state)).toBe(true);
-    // Bundles should show selected (grandchildren — family is child of
-    // collection bundle, bundles are children of family)
     expect(isSelected('pkg-upright-sku')(state)).toBe(true);
     expect(isSelected('pkg-italic-sku')(state)).toBe(true);
-    // Individual styles should also show selected
     expect(isSelected('s1')(state)).toBe(true);
   });
   it('selecting one bundle then another upgrades to family via reducer', () => {
-    const state = makeFamilyWithBundlesState();
+    let state = select(makeState(FAMILY_WITH_PACKAGES), 'pkg-upright-sku');
+    expect(selected(state)).toEqual(['pkg-upright-sku']);
 
-    // Select first bundle
-    let newState = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'pkg-upright-sku',
-      selected: true
-    });
-    expect(newState.selectedSkuIds['pkg-upright-sku']).toBe(true);
-
-    // Select second bundle — should upgrade to family
-    newState = reducer(newState, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'pkg-italic-sku',
-      selected: true
-    });
-
-    // Family should be selected since family ($500) = two bundles ($250+$250)
-    expect(newState.selectedSkuIds['family-sku']).toBe(true);
-    // Both bundles should report as selected
-    expect(isSelected('pkg-upright-sku')(newState)).toBe(true);
-    expect(isSelected('pkg-italic-sku')(newState)).toBe(true);
+    // Family ($500) = two packages ($250 + $250): one SKU wins the tie
+    state = select(state, 'pkg-italic-sku');
+    expect(selected(state)).toEqual(['family-sku']);
+    expect(isSelected('pkg-upright-sku')(state)).toBe(true);
+    expect(isSelected('pkg-italic-sku')(state)).toBe(true);
   });
   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 = reducer(state, {
-      type: 'SELECT_SKU_ID',
-      skuId: 'pkg-italic-sku',
-      selected: true
-    });
-
-    // Should transitively upgrade: bundle → family → collection bundle
-    expect(newState.selectedSkuIds['coll-bundle-sku']).toBe(true);
-    expect(newState.selectedSkuIds['family-sku']).toBe(false);
-    expect(newState.selectedSkuIds['pkg-upright-sku']).toBe(false);
-    expect(newState.selectedSkuIds['pkg-italic-sku']).toBe(false);
-
-    // All items should report as selected via isSelected
-    expect(isSelected('family-sku')(newState)).toBe(true);
-    expect(isSelected('pkg-upright-sku')(newState)).toBe(true);
-    expect(isSelected('pkg-italic-sku')(newState)).toBe(true);
-    expect(isSelected('s1')(newState)).toBe(true);
-    expect(isSelected('vs1')(newState)).toBe(true);
+    const state = select(makeState(WITH_COLLECTION_BUNDLE), 'pkg-upright-sku', 'pkg-italic-sku');
+    expect(selected(state)).toEqual(['coll-bundle-sku']);
+    expect(isSelected('family-sku')(state)).toBe(true);
+    expect(isSelected('pkg-upright-sku')(state)).toBe(true);
+    expect(isSelected('s1')(state)).toBe(true);
+    expect(isSelected('vs1')(state)).toBe(true);
   });
-  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
-      }
-    });
+  it('transitive upgrade prefers the collection with the most font styles', () => {
+    const state = select(makeState({
+      ...FAMILY_WITH_PACKAGES,
+      'small-bundle-sku': [500, ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5']],
+      'big-bundle-sku': [500, ['f1', 'f2', 'f3', 'f4', 'f5', 'fi1', 'fi2', 'fi3', 'fi4', 'fi5', 'vf1']],
+      'var-sku': [300, ['vf1']]
+    }), 'family-sku');
+    expect(selected(state)).toEqual(['big-bundle-sku']);
+  });
+});
 
-    // 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] = collectionSkuIdWithDiscount(state, 'family-sku');
-    expect(collId).toBe('coll-bundle-sku');
+// =========================================================================
+// POPULATE_PRODUCT_STATE
+// =========================================================================
+describe('POPULATE_PRODUCT_STATE', () => {
+  const sku = (id, amount) => ({
+    id,
+    price: {
+      amount
+    }
+  });
+  const style = (id, skuId) => ({
+    id,
+    sku: skuId ? sku(skuId, 40) : null
+  });
+  const textFamily = {
+    id: 'text',
+    name: 'Text',
+    sku: sku('text-sku', 500),
+    fontStyles: [style('f1', 's1'), style('f2', 's2')],
+    bundles: [{
+      id: 'upright',
+      name: 'Upright',
+      sku: sku('upright-sku', 60),
+      fontStyles: [style('f1', 's1')]
+    }]
+  };
+  const textVariable = {
+    id: 'text-var',
+    name: 'Text Variable',
+    sku: sku('text-var-sku', 300),
+    fontStyles: [style('vf1', null)],
+    bundles: []
+  };
+  const superfamily = {
+    node: {
+      __typename: 'FontCollection',
+      id: 'super',
+      name: 'Thunder',
+      sku: sku('super-sku', 750),
+      fontStyles: [],
+      bundles: [],
+      collectionBundles: [{
+        id: 'text-bundle',
+        name: 'Text + Variable',
+        sku: sku('text-bundle-sku', 500),
+        memberCollections: [textFamily, textVariable]
+      }],
+      children: [textFamily, textVariable]
+    }
+  };
+  it('records the styles every SKU grants', () => {
+    const state = reducer(makeState(), {
+      type: 'POPULATE_PRODUCT_STATE',
+      data: superfamily
+    });
+    expect(state.skuStyleIds).toEqual({
+      'super-sku': ['f1', 'f2', 'vf1'],
+      'text-bundle-sku': ['f1', 'f2', 'vf1'],
+      'text-sku': ['f1', 'f2'],
+      'text-var-sku': ['vf1'],
+      'upright-sku': ['f1'],
+      s1: ['f1'],
+      s2: ['f2']
+    });
+  });
+  it('prices a SKU picked before its product loaded once it has', () => {
+    const picked = select(makeState(), 'text-sku');
+    expect(selected(picked)).toEqual(['text-sku']);
+    const loaded = reducer(picked, {
+      type: 'POPULATE_PRODUCT_STATE',
+      data: superfamily
+    });
+    expect(selected(loaded)).toEqual(['text-bundle-sku']);
   });
-  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] = collectionSkuIdWithDiscount(state, 'family-sku');
-    // Both bundles have the same price, but big-bundle has more styles
-    expect(collId).toBe('big-bundle-sku');
+});
+
+// =========================================================================
+// Random catalogs – the selection is the cheapest possible, whatever the order
+// =========================================================================
+describe('selection on random catalogs', () => {
+  // mulberry32: a small seeded PRNG so failures reproduce
+  const random = seed => () => {
+    seed = seed + 0x6d2b79f5 | 0;
+    let t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+
+  // Two families of three styles, their family SKUs and a superfamily, plus a
+  // few bundles – some within a family, some across both.
+  const randomCatalog = rand => {
+    const pick = items => items[Math.floor(rand() * items.length)];
+    const styles = ['a1', 'a2', 'a3', 'b1', 'b2', 'b3'];
+    const catalog = {};
+    for (const styleId of styles) catalog[`s:${styleId}`] = [10 + Math.floor(rand() * 10), [styleId]];
+    const priceFor = styleIds => Math.round(styleIds.length * (6 + rand() * 12));
+    catalog['family:a'] = [priceFor(styles.slice(0, 3)), styles.slice(0, 3)];
+    catalog['family:b'] = [priceFor(styles.slice(3)), styles.slice(3)];
+    catalog['super'] = [priceFor(styles), styles];
+    for (let i = 0; i < 4; i++) {
+      const pool = pick([styles.slice(0, 3), styles.slice(3), styles]);
+      const styleIds = [...new Set([pick(pool), pick(pool), pick(pool)])];
+      if (styleIds.length > 1) catalog[`bundle:${i}`] = [priceFor(styleIds), styleIds];
+    }
+    return catalog;
+  };
+
+  // Every subset of SKUs, keeping the cheapest in which each pick sits inside
+  // one SKU granting all its styles.
+  const bruteForceCost = (catalog, picks) => {
+    const skuIds = Object.keys(catalog);
+    let best = Infinity;
+    for (let subset = 0; subset < 1 << skuIds.length; subset++) {
+      const chosen = skuIds.filter((_, i) => subset & 1 << i);
+      const holds = pick => chosen.some(skuId => catalog[pick][1].every(s => catalog[skuId][1].includes(s)));
+      if (!picks.every(holds)) continue;
+      best = Math.min(best, chosen.reduce((sum, skuId) => sum + catalog[skuId][0], 0));
+    }
+    return best;
+  };
+  const shuffled = (items, rand) => items.map(item => [rand(), item]).sort((a, b) => a[0] - b[0]).map(_ref2 => {
+    let [, item] = _ref2;
+    return item;
+  });
+  it('matches brute force and ignores click order', () => {
+    const rand = random(1238);
+    for (let run = 0; run < 150; run++) {
+      const catalog = randomCatalog(rand);
+      const state = makeState(catalog);
+      const picks = shuffled(Object.keys(catalog), rand).slice(0, 1 + Math.floor(rand() * 4));
+      const cost = cheapestSkuIds(picks, state).reduce((sum, skuId) => sum + catalog[skuId][0], 0);
+      expect(cost, JSON.stringify({
+        catalog,
+        picks
+      })).toBe(bruteForceCost(catalog, picks));
+      const orders = [picks, shuffled(picks, rand), [...picks].reverse()];
+      const results = orders.map(order => selected(select(state, ...order)));
+      expect(results[1], JSON.stringify({
+        catalog,
+        orders
+      })).toEqual(results[0]);
+      expect(results[2], JSON.stringify({
+        catalog,
+        orders
+      })).toEqual(results[0]);
+      const chosen = select(state, ...picks);
+      for (const skuId of Object.keys(catalog)) {
+        const added = additionalCost(chosen, skuId);
+        expect(added).toBeGreaterThanOrEqual(0);
+        expect(added).toBeLessThanOrEqual(catalog[skuId][0]);
+      }
+    }
   });
 });