@codeleap/styles 5.8.1 → 5.8.3

package/src/theme/tests/themeStore.spec.ts

@@ -0,0 +1,698 @@
+import { describe, it, expect, beforeEach } from 'bun:test'
+import { ThemeStore, themeStore, themeStoreComputed } from '../themeStore'
+
+describe('ThemeStore - Heavy Load Tests', () => {
+  let store: ThemeStore
+
+  const getThemeStore = () => store.theme as any
+
+  beforeEach(() => {
+    store = new ThemeStore()
+  })
+
+  describe('basic functionality', () => {
+    it('should handle theme management', () => {
+      const mockTheme = {
+        colors: { primary: '#007bff' },
+        spacing: { small: '8px' }
+      }
+
+      store.setTheme(mockTheme)
+      expect(getThemeStore()).toEqual(mockTheme)
+    })
+
+    it('should handle color scheme management', () => {
+      store.setColorScheme('dark')
+      expect(store.colorScheme).toBe('dark')
+    })
+  })
+
+  describe('stress tests - massive data operations', () => {
+    it('should handle thousands of theme updates without performance degradation', () => {
+      const iterations = 10000
+      const startTime = performance.now()
+
+      for (let i = 0; i < iterations; i++) {
+        const theme = {
+          colors: {
+            primary: `#${i.toString(16).padStart(6, '0')}`,
+            secondary: `#${(i * 2).toString(16).padStart(6, '0')}`,
+            background: `#${(i * 3).toString(16).padStart(6, '0')}`,
+            surface: `#${(i * 4).toString(16).padStart(6, '0')}`,
+            text: `#${(i * 5).toString(16).padStart(6, '0')}`
+          },
+          spacing: {
+            xs: `${i}px`,
+            sm: `${i * 2}px`,
+            md: `${i * 4}px`,
+            lg: `${i * 8}px`,
+            xl: `${i * 16}px`
+          },
+          typography: {
+            fontSize: `${i}px`,
+            fontWeight: i % 900,
+            lineHeight: i / 100
+          },
+          iteration: i
+        }
+
+        store.setTheme(theme)
+
+        // Verify state is correctly updated every 1000 iterations
+        if (i % 1000 === 0) {
+          expect(getThemeStore()?.iteration).toBe(i)
+        }
+      }
+
+      const endTime = performance.now()
+      const executionTime = endTime - startTime
+
+      // Should complete within reasonable time (adjust threshold as needed)
+      expect(executionTime).toBeLessThan(5000) // 5 seconds
+      expect(getThemeStore()?.iteration).toBe(iterations - 1)
+
+      console.log(`Theme updates: ${iterations} operations in ${executionTime.toFixed(2)}ms`)
+    })
+
+    it('should handle massive color schemes with deep nesting', () => {
+      const colorSchemes = {}
+      const schemeCount = 1000
+      const colorsPerScheme = 100
+
+      // Generate massive color schemes
+      for (let scheme = 0; scheme < schemeCount; scheme++) {
+        const colors = {}
+        for (let color = 0; color < colorsPerScheme; color++) {
+          colors[`color_${color}`] = {
+            primary: `#${(scheme * color).toString(16).padStart(6, '0')}`,
+            variants: {
+              light: `#${(scheme * color + 100000).toString(16).padStart(6, '0')}`,
+              dark: `#${(scheme * color + 200000).toString(16).padStart(6, '0')}`,
+              medium: `#${(scheme * color + 300000).toString(16).padStart(6, '0')}`
+            },
+            states: {
+              hover: `#${(scheme * color + 400000).toString(16).padStart(6, '0')}`,
+              active: `#${(scheme * color + 500000).toString(16).padStart(6, '0')}`,
+              disabled: `#${(scheme * color + 600000).toString(16).padStart(6, '0')}`,
+              focus: `#${(scheme * color + 700000).toString(16).padStart(6, '0')}`
+            }
+          }
+        }
+        colorSchemes[`scheme_${scheme}`] = colors
+      }
+
+      const startTime = performance.now()
+      store.setAlternateColorsScheme(colorSchemes)
+      const endTime = performance.now()
+
+      expect(Object.keys(store.alternateColorsScheme)).toHaveLength(schemeCount)
+      expect(Object.keys(store.alternateColorsScheme.scheme_0)).toHaveLength(colorsPerScheme)
+
+      console.log(`Color schemes: ${schemeCount} schemes with ${colorsPerScheme} colors each in ${(endTime - startTime).toFixed(2)}ms`)
+    })
+
+    it('should handle rapid color scheme injections and ejections', () => {
+      const operations = 5000
+      const startTime = performance.now()
+
+      // Initial base scheme
+      store.setAlternateColorsScheme({
+        base: {
+          primary: '#000000',
+          secondary: '#111111',
+          tertiary: '#222222'
+        }
+      })
+
+      for (let i = 0; i < operations; i++) {
+        const schemeName = `scheme_${i}`
+        const colors = {
+          primary: `#${i.toString(16).padStart(6, '0')}`,
+          accent: `#${(i * 2).toString(16).padStart(6, '0')}`,
+          background: `#${(i * 3).toString(16).padStart(6, '0')}`,
+          customColor: `#${(i * 4).toString(16).padStart(6, '0')}`
+        }
+
+        // Inject scheme
+        const injected = store.injectColorScheme(schemeName, colors)
+        expect(injected[schemeName]).toBeDefined()
+        expect(injected[schemeName].primary).toBe(colors.primary)
+        expect(injected[schemeName].secondary).toBe('#111111') // inherited
+
+        // Every 10th operation, eject some schemes
+        if (i % 10 === 0 && i > 0) {
+          const toEject = `scheme_${i - 5}`
+          store.ejectColorScheme(toEject)
+          expect(store.alternateColorsScheme[toEject]).toBeUndefined()
+        }
+      }
+
+      const endTime = performance.now()
+      const executionTime = endTime - startTime
+
+      expect(executionTime).toBeLessThan(3000) // Should be fast
+      console.log(`Color scheme operations: ${operations} inject/eject operations in ${executionTime.toFixed(2)}ms`)
+    })
+
+    it('should handle massive variants with complex structures', () => {
+      const componentCount = 500
+      const variantsPerComponent = 50
+      const variants = {}
+
+      for (let comp = 0; comp < componentCount; comp++) {
+        const componentVariants = {}
+        for (let variant = 0; variant < variantsPerComponent; variant++) {
+          componentVariants[`variant_${variant}`] = {
+            className: `comp-${comp}-var-${variant}`,
+            styles: {
+              color: `#${(comp * variant).toString(16).padStart(6, '0')}`,
+              backgroundColor: `#${(comp + variant).toString(16).padStart(6, '0')}`,
+              fontSize: `${comp + variant}px`,
+              padding: `${variant}px ${comp}px`,
+              margin: `${comp * variant}px`,
+              borderRadius: `${variant / 2}px`,
+              transform: `rotate(${variant}deg) scale(${1 + comp / 100})`,
+              boxShadow: `${variant}px ${comp}px ${comp + variant}px rgba(${comp}, ${variant}, ${comp + variant}, 0.${variant})`
+            },
+            states: {
+              hover: { opacity: 0.8 + (variant / 100) },
+              active: { transform: `scale(${1 + variant / 1000})` },
+              disabled: { opacity: 0.5 },
+              focus: { outline: `${variant}px solid #${comp.toString(16).padStart(6, '0')}` }
+            }
+          }
+        }
+        variants[`component_${comp}`] = componentVariants
+      }
+
+      const startTime = performance.now()
+      store.setVariants(variants)
+      const endTime = performance.now()
+
+      expect(Object.keys(store.variants)).toHaveLength(componentCount)
+      // @ts-ignore
+      expect(Object.keys(store.variants.component_0)).toHaveLength(variantsPerComponent)
+
+      console.log(`Variants: ${componentCount} components with ${variantsPerComponent} variants each in ${(endTime - startTime).toFixed(2)}ms`)
+    })
+  })
+
+  describe('concurrent operations stress test', () => {
+    it('should handle simultaneous theme, color scheme, and variants updates', () => {
+      const iterations = 2000
+      const startTime = performance.now()
+
+      for (let i = 0; i < iterations; i++) {
+        // Simultaneous updates
+        store.setTheme({
+          colors: { primary: `#${i.toString(16).padStart(6, '0')}` },
+          iteration: i
+        })
+
+        store.setColorScheme(`scheme_${i % 50}`)
+
+        store.setVariants({
+          [`component_${i}`]: {
+            [`variant_${i}`]: {
+              className: `test-${i}`,
+              styles: { color: `#${i.toString(16).padStart(6, '0')}` }
+            }
+          }
+        })
+
+        store.injectColorScheme(`dynamic_${i % 100}`, {
+          primary: `#${(i * 2).toString(16).padStart(6, '0')}`,
+          secondary: `#${(i * 3).toString(16).padStart(6, '0')}`
+        })
+
+        // Verify consistency every 200 iterations
+        if (i % 200 === 0) {
+          expect(getThemeStore()?.iteration).toBe(i)
+          expect(store.colorScheme).toBe(`scheme_${i % 50}`)
+          expect(store.variants[`component_${i}`]).toBeDefined()
+        }
+      }
+
+      const endTime = performance.now()
+      const executionTime = endTime - startTime
+
+      expect(executionTime).toBeLessThan(10000) // 10 seconds
+      expect(getThemeStore()?.iteration).toBe(iterations - 1)
+
+      console.log(`Concurrent operations: ${iterations * 4} total operations in ${executionTime.toFixed(2)}ms`)
+    })
+  })
+
+  describe('function storage and execution stress tests', () => {
+    it('should handle thousands of stored functions with complex computations', () => {
+      const functionCount = 5000
+      const theme = {
+        colors: {},
+        spacing: {},
+        calculators: {},
+        transformers: {},
+        validators: {}
+      }
+
+      const startTime = performance.now()
+
+      // Store various types of functions
+      for (let i = 0; i < functionCount; i++) {
+        // Simple calculators
+        theme.calculators[`calc_${i}`] = (value) => value * (i + 1)
+
+        // Complex transformers
+        theme.transformers[`transform_${i}`] = (input) => {
+          return {
+            scaled: input * Math.pow(2, i % 10),
+            offset: input + (i * 3.14159),
+            computed: Math.sin(input + i) * 100,
+            conditional: input > i ? input * 2 : input / 2,
+            recursive: i > 0 ? theme.calculators[`calc_${i - 1}`]?.(input) || input : input
+          }
+        }
+
+        // Spacing functions
+        theme.spacing[`space_${i}`] = (multiplier = 1) => `${i * 8 * multiplier}px`
+
+        // Color functions  
+        theme.colors[`color_${i}`] = (opacity = 1) => {
+          const r = (i * 37) % 256
+          const g = (i * 73) % 256
+          const b = (i * 113) % 256
+          return `rgba(${r}, ${g}, ${b}, ${opacity})`
+        }
+
+        // Validators
+        theme.validators[`validate_${i}`] = (value) => {
+          return value !== null &&
+            value !== undefined &&
+            (typeof value === 'number' ? value >= i : value.length >= i % 10)
+        }
+      }
+
+      store.setTheme(theme)
+      const setTime = performance.now()
+
+      // Execute all functions to test performance
+      let executionResults = 0
+      const executeStartTime = performance.now()
+
+      for (let i = 0; i < functionCount; i++) {
+        const testValue = i * 2.5
+
+        // Execute calculators
+        const calcResult = getThemeStore()?.calculators[`calc_${i}`]?.(testValue)
+        if (calcResult) executionResults++
+
+        // Execute transformers
+        const transformResult = getThemeStore()?.transformers[`transform_${i}`]?.(testValue)
+        if (transformResult?.scaled) executionResults++
+
+        // Execute spacing functions
+        const spacingResult = getThemeStore()?.spacing[`space_${i}`]?.(2)
+        if (spacingResult?.includes('px')) executionResults++
+
+        // Execute color functions
+        const colorResult = getThemeStore()?.colors[`color_${i}`]?.(0.8)
+        if (colorResult?.includes('rgba')) executionResults++
+
+        // Execute validators
+        const validatorResult = getThemeStore()?.validators[`validate_${i}`]?.(testValue)
+        if (typeof validatorResult === 'boolean') executionResults++
+
+        // Test some complex chaining every 100 iterations
+        if (i % 100 === 0) {
+          const chainResult = getThemeStore()?.transformers[`transform_${i}`]?.(
+            getThemeStore()?.calculators[`calc_${i}`]?.(testValue) || 0
+          )
+          if (chainResult) executionResults++
+        }
+      }
+
+      const executeEndTime = performance.now()
+      const totalTime = executeEndTime - startTime
+
+      expect(executionResults).toBeGreaterThan(functionCount * 4) // At least 4 successful executions per function
+      expect(totalTime).toBeLessThan(15000) // Should handle massive function storage/execution
+
+      console.log(`Function storage: ${functionCount} functions stored in ${(setTime - startTime).toFixed(2)}ms`)
+      console.log(`Function execution: ${executionResults} executions in ${(executeEndTime - executeStartTime).toFixed(2)}ms`)
+      console.log(`Total function test: ${totalTime.toFixed(2)}ms`)
+    })
+
+    it('should handle recursive and nested function calls', () => {
+      const depth = 100
+      const iterations = 1000
+
+      // Create deeply nested function chains
+      const theme = {
+        fibonacci: {},
+        factorial: {},
+        compose: {},
+        pipeline: {}
+      }
+
+      // Fibonacci functions
+      for (let i = 0; i < depth; i++) {
+        theme.fibonacci[`fib_${i}`] = (n) => {
+          if (n <= 1) return n
+          if (i > 0 && theme.fibonacci[`fib_${i - 1}`]) {
+            return theme.fibonacci[`fib_${i - 1}`](n - 1) + theme.fibonacci[`fib_${i - 1}`](n - 2)
+          }
+          return n
+        }
+      }
+
+      // Factorial chains
+      for (let i = 0; i < depth; i++) {
+        theme.factorial[`fact_${i}`] = (n) => {
+          if (n <= 1) return 1
+          const prevFact = theme.factorial[`fact_${Math.max(0, i - 1)}`]
+          return prevFact ? n * prevFact(n - 1) : n
+        }
+      }
+
+      // Function composition
+      for (let i = 0; i < depth; i++) {
+        theme.compose[`comp_${i}`] = (value) => {
+          let result = value
+          for (let j = 0; j <= i && j < 10; j++) {
+            result = Math.sqrt(Math.abs(result * (j + 1)))
+          }
+          return result
+        }
+      }
+
+      // Pipeline functions
+      for (let i = 0; i < depth; i++) {
+        theme.pipeline[`pipe_${i}`] = (input) => {
+          const steps = [
+            (x) => x * 2,
+            (x) => x + i,
+            (x) => Math.pow(x, 1.5),
+            (x) => x % 1000,
+            (x) => theme.compose[`comp_${Math.min(i, depth - 1)}`]?.(x) || x
+          ]
+          return steps.reduce((acc, fn) => fn(acc), input)
+        }
+      }
+
+      store.setTheme(theme)
+
+      const startTime = performance.now()
+      let successfulExecutions = 0
+
+      // Execute nested functions
+      for (let i = 0; i < iterations; i++) {
+        const testValue = i % 20
+
+        try {
+          // Test fibonacci (limited to avoid stack overflow)
+          const fibResult = getThemeStore()?.fibonacci[`fib_${i % 10}`]?.(testValue % 10)
+          if (typeof fibResult === 'number') successfulExecutions++
+
+          // Test factorial
+          const factResult = getThemeStore()?.factorial[`fact_${i % depth}`]?.(testValue % 8)
+          if (typeof factResult === 'number') successfulExecutions++
+
+          // Test composition
+          const compResult = getThemeStore()?.compose[`comp_${i % depth}`]?.(testValue + 1)
+          if (typeof compResult === 'number') successfulExecutions++
+
+          // Test pipeline
+          const pipeResult = getThemeStore()?.pipeline[`pipe_${i % depth}`]?.(testValue)
+          if (typeof pipeResult === 'number') successfulExecutions++
+
+          // Test chained execution
+          if (i % 50 === 0) {
+            const chainedResult = getThemeStore()?.pipeline[`pipe_${i % depth}`]?.(
+              getThemeStore()?.compose[`comp_${i % depth}`]?.(testValue) || 0
+            )
+            if (typeof chainedResult === 'number') successfulExecutions++
+          }
+        } catch (error) {
+          // Some recursion might fail, that's ok
+        }
+      }
+
+      const endTime = performance.now()
+      const executionTime = endTime - startTime
+
+      expect(successfulExecutions).toBeGreaterThan(iterations * 3) // Most executions should succeed
+      expect(executionTime).toBeLessThan(10000)
+
+      console.log(`Recursive functions: ${depth} depth, ${iterations} iterations, ${successfulExecutions} successful executions in ${executionTime.toFixed(2)}ms`)
+    })
+
+    it('should handle function factories and dynamic function generation', () => {
+      const factoryCount = 1000
+      const generatedPerFactory = 10
+
+      const theme = {
+        factories: {},
+        generated: {},
+        dynamicComputed: {}
+      }
+
+      const startTime = performance.now()
+
+      // Create function factories
+      for (let i = 0; i < factoryCount; i++) {
+        theme.factories[`factory_${i}`] = (config) => {
+          return {
+            calculator: (value) => value * (config.multiplier || 1) + (config.offset || 0),
+            validator: (value) => value >= (config.min || 0) && value <= (config.max || 1000),
+            transformer: (value) => ({
+              original: value,
+              scaled: value * (config.scale || 1),
+              formatted: `${config.prefix || ''}${value}${config.suffix || ''}`,
+              computed: Math.pow(value, config.power || 1)
+            }),
+            composer: (...fns) => (value) => fns.reduce((acc, fn) => fn(acc), value)
+          }
+        }
+
+        // Generate functions using factories
+        for (let j = 0; j < generatedPerFactory; j++) {
+          const config = {
+            multiplier: i + j,
+            offset: j * 10,
+            scale: 1 + (j / 10),
+            min: i,
+            max: i * 100,
+            prefix: `gen_${i}_`,
+            suffix: `_${j}`,
+            power: 1 + (j / 5)
+          }
+
+          const generatedFunctions = theme.factories[`factory_${i}`](config)
+          theme.generated[`gen_${i}_${j}`] = generatedFunctions
+
+          // Create dynamic computed values
+          theme.dynamicComputed[`comp_${i}_${j}`] = (input) => {
+            const calc = generatedFunctions.calculator(input)
+            const valid = generatedFunctions.validator(calc)
+            const transform = generatedFunctions.transformer(calc)
+
+            return {
+              calculated: calc,
+              isValid: valid,
+              transformed: transform,
+              final: valid ? transform.computed : 0
+            }
+          }
+        }
+      }
+
+      store.setTheme(theme)
+      const creationTime = performance.now()
+
+      // Execute generated functions
+      let executionCount = 0
+      const executionStartTime = performance.now()
+
+      for (let i = 0; i < factoryCount; i++) {
+        for (let j = 0; j < generatedPerFactory; j++) {
+          const testValue = (i + j) * 1.5
+
+          try {
+            // Test generated functions
+            const generated = getThemeStore()?.generated[`gen_${i}_${j}`]
+            if (generated) {
+              const calcResult = generated.calculator(testValue)
+              const validResult = generated.validator(calcResult)
+              const transformResult = generated.transformer(testValue)
+
+              if (typeof calcResult === 'number') executionCount++
+              if (typeof validResult === 'boolean') executionCount++
+              if (transformResult?.original === testValue) executionCount++
+            }
+
+            // Test dynamic computed
+            const dynamicResult = getThemeStore()?.dynamicComputed[`comp_${i}_${j}`]?.(testValue)
+            if (dynamicResult?.calculated !== undefined) executionCount++
+
+          } catch (error) {
+            // Some executions might fail
+          }
+
+          // Test function composition every 100 iterations
+          if ((i * generatedPerFactory + j) % 100 === 0) {
+            try {
+              const generated = getThemeStore()?.generated[`gen_${i}_${j}`]
+              if (generated?.composer) {
+                const composed = generated.composer(
+                  (x) => x * 2,
+                  (x) => x + 10,
+                  generated.calculator
+                )(testValue)
+                if (typeof composed === 'number') executionCount++
+              }
+            } catch (error) {
+              // Composition might fail
+            }
+          }
+        }
+      }
+
+      const executionEndTime = performance.now()
+      const totalTime = executionEndTime - startTime
+
+      const expectedOperations = factoryCount * generatedPerFactory * 3 // At least 3 operations per generated function
+      expect(executionCount).toBeGreaterThan(expectedOperations * 0.8) // 80% success rate minimum
+      expect(totalTime).toBeLessThan(20000) // 20 seconds max
+
+      console.log(`Function factories: ${factoryCount} factories generating ${factoryCount * generatedPerFactory} functions`)
+      console.log(`Creation time: ${(creationTime - startTime).toFixed(2)}ms`)
+      console.log(`Execution time: ${(executionEndTime - executionStartTime).toFixed(2)}ms`)
+      console.log(`Total operations: ${executionCount} in ${totalTime.toFixed(2)}ms`)
+    })
+  })
+
+  describe('memory pressure and cleanup', () => {
+    it('should handle massive data without memory leaks', () => {
+      const hugeSets = 10
+      const itemsPerSet = 1000
+
+      for (let set = 0; set < hugeSets; set++) {
+        // Create massive theme
+        const hugeTheme = {
+          colors: {},
+          spacing: {},
+          typography: {},
+          components: {}
+        }
+
+        for (let i = 0; i < itemsPerSet; i++) {
+          hugeTheme.colors[`color_${i}`] = `#${i.toString(16).padStart(6, '0')}`
+          hugeTheme.spacing[`space_${i}`] = `${i}px`
+          hugeTheme.typography[`font_${i}`] = `${i}px`
+          hugeTheme.components[`comp_${i}`] = {
+            styles: { margin: `${i}px` },
+            variants: Array.from({ length: 10 }, (_, j) => `variant_${j}`)
+          }
+        }
+
+        store.setTheme(hugeTheme)
+
+        // Create massive color schemes
+        const hugeColorSchemes = {}
+        for (let i = 0; i < itemsPerSet; i++) {
+          const scheme = {}
+          for (let j = 0; j < 50; j++) {
+            scheme[`color_${j}`] = `#${(i * j).toString(16).padStart(6, '0')}`
+          }
+          hugeColorSchemes[`scheme_${set}_${i}`] = scheme
+        }
+
+        store.setAlternateColorsScheme(hugeColorSchemes)
+
+        // Verify data is accessible
+        expect(Object.keys(getThemeStore()?.colors || {})).toHaveLength(itemsPerSet)
+        expect(Object.keys(store.alternateColorsScheme)).toHaveLength(itemsPerSet)
+      }
+
+      // Final verification
+      expect(getThemeStore()).toBeDefined()
+      expect(Object.keys(store.alternateColorsScheme)).toHaveLength(itemsPerSet)
+
+      console.log(`Memory test: Handled ${hugeSets} sets of ${itemsPerSet} items each`)
+    })
+  })
+
+  describe('computed store performance under heavy load', () => {
+    it('should maintain reactivity with rapid updates', () => {
+      const updates = 3000
+      const startTime = performance.now()
+      const computedValues = []
+
+      for (let i = 0; i < updates; i++) {
+        themeStore.setTheme({
+          colors: { primary: `#${i.toString(16).padStart(6, '0')}` },
+          iteration: i
+        })
+        themeStore.setColorScheme(`scheme_${i % 100}`)
+
+        const computed = themeStoreComputed.get() as any
+        computedValues.push(computed)
+
+        // Verify computed values every 500 iterations
+        if (i % 500 === 0) {
+          expect(computed.theme?.iteration).toBe(i)
+          expect(computed.colorScheme).toBe(`scheme_${i % 100}`)
+        }
+      }
+
+      const endTime = performance.now()
+      const executionTime = endTime - startTime
+
+      expect(computedValues).toHaveLength(updates)
+      expect(executionTime).toBeLessThan(8000) // 8 seconds
+
+      // Verify final state
+      const finalComputed = themeStoreComputed.get() as any
+      expect(finalComputed.theme?.iteration).toBe(updates - 1)
+      expect(finalComputed.colorScheme).toBe(`scheme_${(updates - 1) % 100}`)
+
+      console.log(`Computed reactivity: ${updates} updates with computed reads in ${executionTime.toFixed(2)}ms`)
+    })
+
+    it('should handle multiple subscribers without performance degradation', () => {
+      const subscribers = []
+      const subscribeCount = 100
+      const updates = 1000
+
+      // Create multiple subscribers
+      for (let i = 0; i < subscribeCount; i++) {
+        const unsubscribe = themeStoreComputed.subscribe((value: any) => {
+          // Simulate some work
+          if (value.theme?.iteration && value.theme.iteration % 100 === 0) {
+            // Do something with the value
+            expect(value).toBeDefined()
+          }
+        })
+        subscribers.push(unsubscribe)
+      }
+
+      const startTime = performance.now()
+
+      // Make updates that should trigger all subscribers
+      for (let i = 0; i < updates; i++) {
+        themeStore.setTheme({
+          colors: { primary: `#${i.toString(16).padStart(6, '0')}` },
+          iteration: i
+        })
+      }
+
+      const endTime = performance.now()
+      const executionTime = endTime - startTime
+
+      // Cleanup subscribers
+      subscribers.forEach(unsubscribe => unsubscribe())
+
+      expect(executionTime).toBeLessThan(5000) // Should handle multiple subscribers efficiently
+      console.log(`Multiple subscribers: ${subscribeCount} subscribers with ${updates} updates in ${executionTime.toFixed(2)}ms`)
+    })
+  })
+})