New HTML content
'\n}\n```\n\n### Style Change (Inline)\n```javascript\n{\n selector: '.button',\n type: 'style',\n value: {\n backgroundColor: 'red', // Use camelCase for CSS properties\n color: '#ffffff',\n fontSize: '18px'\n },\n trigger_on_view: false // Control exposure timing\n}\n```\n\n### Style Rules (With Pseudo-States)\n```javascript\n{\n selector: '.button',\n type: 'styleRules',\n states: {\n normal: {\n backgroundColor: '#007bff',\n color: 'white',\n padding: '10px 20px',\n borderRadius: '4px',\n transition: 'all 0.2s ease'\n },\n hover: {\n backgroundColor: '#0056b3',\n transform: 'translateY(-2px)',\n boxShadow: '0 4px 8px rgba(0,0,0,0.2)'\n },\n active: {\n backgroundColor: '#004085',\n transform: 'translateY(0)'\n },\n focus: {\n outline: '2px solid #007bff',\n outlineOffset: '2px'\n }\n },\n important: true, // default is true\n trigger_on_view: true\n}\n```\n\n**Benefits of styleRules:**\n- Handles CSS pseudo-states properly (hover, active, focus)\n- Survives React re-renders through stylesheet injection\n- More performant than inline styles for complex interactions\n\n### Class Change\n```javascript\n{\n selector: '.card',\n type: 'class',\n add: ['highlighted', 'featured'],\n remove: ['default']\n}\n```\n\n### Attribute Change\n```javascript\n{\n selector: 'input[name=\"email\"]',\n type: 'attribute',\n value: {\n 'placeholder': 'Enter your email',\n 'required': 'true'\n }\n}\n```\n\n### JavaScript Execution\n```javascript\n{\n selector: '.dynamic-element',\n type: 'javascript',\n value: 'element.addEventListener(\"click\", () => console.log(\"Clicked!\"))'\n}\n```\n\n### Element Move\n```javascript\n{\n selector: '.sidebar',\n type: 'move',\n targetSelector: '.main-content',\n position: 'before' // 'before', 'after', 'firstChild', 'lastChild'\n}\n```\n\n### Element Creation\n```javascript\n{\n selector: '.new-banner', // For identification\n type: 'create',\n element: '',\n targetSelector: 'body',\n position: 'firstChild',\n trigger_on_view: false\n}\n```\n\n### Pending Changes (Elements Not Yet in DOM)\n```javascript\n{\n selector: '.lazy-loaded-button',\n type: 'style',\n value: {\n backgroundColor: 'red',\n color: 'white'\n },\n waitForElement: true, // Wait for element to appear\n observerRoot: '.main-content', // Optional: specific container to watch\n trigger_on_view: true\n}\n```\n\n**Perfect for:**\n- Lazy-loaded content\n- React components that mount/unmount\n- Modal dialogs\n- API-loaded content\n- Infinite scroll items\n\n## Key Features\n\n### Exposure Tracking with trigger_on_view\n\nThe `trigger_on_view` property prevents sample ratio mismatch by controlling when A/B test exposures are recorded:\n\n```javascript\n{\n selector: '.below-fold-element',\n type: 'style',\n value: { backgroundColor: 'blue' },\n trigger_on_view: true // Only trigger when element becomes visible\n}\n```\n\n- **`false` (default)**: Exposure triggers immediately\n- **`true`**: Exposure triggers when element enters viewport\n- **Cross-variant tracking**: Tracks elements from ALL variants for unbiased exposure\n\n### Core API Methods\n\n```javascript\n// Apply changes from ABsmartly context\nawait plugin.applyChanges('experiment-name');\n\n// Apply individual change\nconst success = plugin.applyChange(change, 'experiment-name');\n\n// Remove changes\nplugin.removeChanges('experiment-name');\n\n// Get applied changes\nconst changes = plugin.getAppliedChanges('experiment-name');\n\n// Clean up resources\nplugin.destroy();\n```\n\n## Documentation\n\nFor detailed documentation:\n\n- **[Optimized Loading Guide](docs/OPTIMIZED_LOADING.md)** - Best practices for loading the SDK and plugins with minimal performance impact\n- **[Exposure Tracking Guide](docs/EXPOSURE_TRACKING_GUIDE.md)** - Understanding trigger_on_view and preventing sample ratio mismatch\n\n## Anti-Flicker Support\n\nPrevent content flash before experiments load with two modes:\n\n### Quick Start\n\n**Hide entire page with smooth fade-in:**\n```javascript\nconst domPlugin = new DOMChangesPlugin({\n context: context,\n hideUntilReady: 'body',\n hideTransition: '0.3s ease-in' // Smooth fade-in\n});\n```\n\n**Hide only experiment elements (recommended):**\n```html\n\n