[mediaqueries-5] Introduce `prefers-reduced-ai` media feature and `PreferenceManager` integration

### 1. The Problem The web is rapidly integrating AI-driven features, such as customer support chatbots, generative text/image UI elements, and even locally hosted LLMs running via WebASM or WebGPU. While powerful, these features come with significant overhead: * **Performance & Bandwidth:** AI widgets often require large JavaScript bundles or multi-gigabyte model weights downloaded to the client. * **Privacy & Trust:** Many users are uncomfortable with their browsing data or text inputs being sent to third-party Cloud AI providers, preferring local processing—or no AI interaction at all. * **User Experience:** Autoplaying AI agents or generative UIs can be distracting or unwanted for users seeking a traditional, deterministic browsing experience. Currently, users have no standardized, global way to express their preference regarding AI features. Developers are left to either force the experience on everyone or rely on fragmented, site-by-site opt-out toggles (similar to cookie banner fatigue). ### 2. The Proposed Solution I propose adding a new media feature, `prefers-reduced-ai`, along with integration into the `PreferenceManager` API. This allows users to set a system or browser-level preference for how web applications should deliver AI features. The proposed values for this preference are: * `recommended` (or `no-preference`): The default behavior. The site loads its AI features as intended (could be cloud or local). * `cloud`: The user allows AI features but prefers lightweight client loads, deferring processing to the server/cloud. * `local`: The user allows AI features but prefers on-device processing for privacy reasons (e.g., instructing the site to use WebGPU rather than an external API). * `none`: The user requests that the site disable non-essential AI features, chatbots, and generative elements. ### 3. Use Cases * **Bandwidth & Load Time Savings:** A news website includes an "AI Article Summarizer" widget. If the user's system preference is set to `none`, the website skips downloading the 3MB JavaScript bundle for the widget, saving data and battery. * **Privacy-Conscious Feature Toggling:** A web-based text editor offers a "grammar check" feature. If the user's preference is `local`, the site loads a small, client-side model. If the preference is `cloud`, it sends the text to the company's server via an API. * **Accessibility and Focus:** A user who finds generative UI animations or proactive chat bubbles distracting sets their OS preference to `none`. Websites respect this by falling back to traditional static FAQs and standard search bars. ### 4. Code Examples **Using CSS Media Queries:** ```css /* Default state: AI chat widget is visible */ .ai-chat-widget { display: block; } /* Hide the widget and show a static contact link instead */ @media (prefers-reduced-ai: none) { .ai-chat-widget { display: none; } .traditional-contact-link { display: block; } } ``` **Using the PreferenceManager API (JavaScript):** ```javascript // Check the user's preference before initializing a heavy AI model const aiPreference = navigator.preferences.prefersReducedAi.value; if (aiPreference === 'none') { console.log('User opted out of AI features. Skipping chatbot load.'); } else if (aiPreference === 'local') { console.log('Loading local WebGPU model to preserve privacy.'); await loadLocalModel(); } else { console.log('Connecting to Cloud AI API.'); connectToCloudEndpoint(); } // Listen for live changes to the preference navigator.preferences.prefersReducedAi.addEventListener('change', (event) => { if (event.value === 'none') { destroyChatWidget(); } }); ``` ### 5. Alternatives Considered * **`prefers-reduced-data`:** While AI features often use more data, `prefers-reduced-data` is too broad. A user on a gigabit connection might still want `prefers-reduced-ai: local` for privacy reasons, regardless of data usage. * **Site-Specific Opt-ins (Cookie/Consent Banners):** Relying on developers to build custom toggles per site contributes to banner fatigue and results in a deeply inconsistent user experience across the web. A browser-level toggle provides a unified, user-first approach. > Yes, I did use AI to draft this