@c15t/react 3.0.0-alpha.7 → 3.0.0-alpha.9

package/docs/frameworks/react/iab.md

@@ -21,10 +21,11 @@ Install `@c15t/iab` alongside your framework adapter, then mount the IAB
 components inside an existing consent provider connected to Inth.
 
 Import the components from `c15t/react/iab` and render them inside your
-existing `ConsentProvider` from `c15t/react`. Import `c15t/react/iab/styles.css`
-at your global stylesheet entry, after `c15t/react/styles.css`: the IAB
-stylesheet holds only the IAB rules and uses the tokens from the base
-stylesheet.
+existing `ConsentProvider` from `c15t/react`.
+
+The IAB banner and dialog render their own styles by default. Leave the
+provider's `styles` option enabled and render the components without a CSS
+import:
 
 ```tsx title="src/iab-consent.tsx"
 import {
@@ -55,6 +56,18 @@ IAB presentation follows `presentation.prompt.blocking` and
 scroll locking and a backdrop together. See [migration](../../upgrade-v3.md) for
 legacy option behavior.
 
+## Mount IABProvider for every IAB policy
+
+IAB is opt-in. The standard `ConsentBanner` and `ConsentDialog` do not
+handle the IAB model, so when a visitor's policy uses it, the backend
+sends its vendor list and the app has no `IABProvider`, they throw an
+`IABUnavailableError` (code `C15T_IAB_UNAVAILABLE`):
+`c15t: this visitor's policy uses IAB TCF, but no <IABProvider> is mounted`.
+The error happens during render, on the server and in the browser, so
+your error boundary or the framework's error overlay shows it. Render `IABProvider` from
+`c15t/react/iab` for those visitors, or remove the `iab` model from the
+policy.
+
 ## Verify vendor and purpose choices
 
 Test category choices alongside vendor, purpose, legitimate-interest and special
@@ -62,6 +75,25 @@ feature controls used by your integration. Confirm the TC String and `__tcfapi`
 reflect the saved state, and verify the vendor's actual requests. A category-only
 banner test does not establish that the IAB flow works.
 
+## Load an external stylesheet
+
+With Tailwind CSS 3, or when you want to put c15t in a named cascade layer,
+import `c15t/react/styles.css` and then `c15t/react/iab/styles.css` at your
+global stylesheet entry. The IAB stylesheet holds the IAB rules and uses the
+base stylesheet's tokens. Set `styles: false` so the components use those
+stylesheets:
+
+```tsx title="src/consent.tsx (partial)"
+import 'c15t/react/styles.css';
+import 'c15t/react/iab/styles.css';
+
+// In the ConsentProvider options:
+styles: false,
+```
+
+Tailwind CSS 3 also needs the
+[PostCSS plugin](../../customization/tailwind.md#set-up-tailwind-css-3).
+
 ## Restrict how vendors use a purpose
 
 Publisher restrictions override a vendor's declared use of one purpose. Pass

package/docs/frameworks/react/quickstart.md

@@ -7,10 +7,11 @@ group: frameworks
 
 ## Before you start
 
-This guide sets up a client-rendered React app built with Vite. The browser
-loads the page, resolves the visitor's policy, then shows the banner or runs
-the scripts the visitor allowed. The build-time step bundles the public
-policy; regional policies may still need a backend location request.
+This guide sets up a client-rendered React app built with Vite. The build
+bundles your project's public policy. The browser loads the page, resolves the
+visitor's policy from that bundle, then shows the banner or runs the scripts
+the visitor allowed. Regional policies may still need a backend location
+request.
 
 * **Next.js or TanStack Start?** Use that framework's guide from the
   [framework list](https://c15t.com/docs/frameworks). Their adapters resolve consent on the
@@ -27,21 +28,67 @@ the backend URL.
 [Choose your setup](../../concepts/choose-your-setup.md#decide-who-runs-the-consent-backend)
 covers self-hosting and offline mode.
 
-Build-time manifests are the recommended production setup. Complete the
-[build-time manifest step](#bundle-the-manifest-during-builds) before
-deploying, and rebuild after changing policies, translations or vendors.
+Bundling the policy at build time is the recommended production setup.
+Rebuild after changing policies, translations or vendors.
 
 ## Install c15t
 
-| Package manager | Command                                           |
-| :-------------- | :------------------------------------------------ |
-| npm             | `npm install c15t@alpha @c15t/integrations@alpha` |
-| pnpm            | `pnpm add c15t@alpha @c15t/integrations@alpha`    |
-| yarn            | `yarn add c15t@alpha @c15t/integrations@alpha`    |
-| bun             | `bun add c15t@alpha @c15t/integrations@alpha`     |
+| Package manager | Command                                                               |
+| :-------------- | :-------------------------------------------------------------------- |
+| npm             | `npm install c15t@alpha @c15t/browser@alpha @c15t/integrations@alpha` |
+| pnpm            | `pnpm add c15t@alpha @c15t/browser@alpha @c15t/integrations@alpha`    |
+| yarn            | `yarn add c15t@alpha @c15t/browser@alpha @c15t/integrations@alpha`    |
+| bun             | `bun add c15t@alpha @c15t/browser@alpha @c15t/integrations@alpha`     |
 
-`c15t` contains the React adapter at `c15t/react`. `@c15t/integrations` holds the
-vendor loaders used below.
+`c15t` contains the React adapter at `c15t/react` and the Vite plugin at
+`c15t/build`. `@c15t/browser` resolves the bundled policy in the browser.
+`@c15t/integrations` holds the vendor loaders used below.
+
+## Bundle your policy
+
+Add `consentManifest` to `vite.config.ts`:
+
+```ts title="vite.config.ts"
+import react from '@vitejs/plugin-react';
+import { consentManifest } from 'c15t/build';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+	const env = loadEnv(mode, process.cwd(), 'VITE_');
+	return {
+		plugins: [
+			react(),
+			// Downloads the policy and writes src/c15t-manifest.ts.
+			consentManifest({
+				backendURL:
+					env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
+			}),
+		],
+	};
+});
+```
+
+`https://benchmarks-inth.inth.app` is a demo project, so the snippet runs as
+is. Replace it with your project's backend URL, exactly as Inth shows it,
+including any path prefix, or set `VITE_C15T_BACKEND_URL` when you build.
+
+`consentManifest` downloads your project's public policy from `/manifest` when
+`vite build` or `vite dev` starts, and writes it to `src/c15t-manifest.ts`.
+Add that file to `.gitignore`.
+
+The snapshot is fixed at build time:
+
+* Rebuild after changing policies, translations or vendors. If your CI caches
+  build output, force a fresh build.
+* The build must reach the backend. A failed fetch stops Next.js, TanStack
+  Start, SvelteKit and Vite builds. By default, Astro and Nuxt log a warning
+  instead and fetch the policy at runtime.
+* Consent choices still go to the backend.
+
+Run `vite build` or `vite dev` before a standalone `tsc`, `vue-tsc` or
+`svelte-check`; the generated file doesn't exist on a fresh checkout. Both
+commands fetch the manifest when they start, so both need the backend.
+`vite preview` serves the last build without fetching.
 
 ## Register your vendor scripts
 
@@ -77,20 +124,23 @@ asks for them, and `ConsentDialogLink` keeps preferences reachable after the
 banner closes.
 
 ```tsx title="src/consent.tsx"
+import { manifest } from '@c15t/browser/headless';
 import {
 	ConsentBanner,
 	ConsentDialog,
 	ConsentDialogLink,
 	ConsentProvider,
-	hosted,
 } from 'c15t/react';
 import type { ReactNode } from 'react';
 
+import { consentManifest } from './c15t-manifest';
 import { scripts } from './scripts';
 
-import 'c15t/react/styles.css';
-
-const mode = hosted({ url: 'https://your-project.inth.app' });
+const mode = manifest({
+	backendURL:
+		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
+	manifest: consentManifest,
+});
 
 export const Consent = ({ children }: { children: ReactNode }) => (
 	<ConsentProvider options={{ mode, scripts }}>
@@ -104,8 +154,17 @@ export const Consent = ({ children }: { children: ReactNode }) => (
 );
 ```
 
-Replace `https://your-project.inth.app` with your project's backend URL,
-exactly as Inth shows it, including any path prefix.
+`manifest()` resolves the policy from the bundled snapshot in the browser,
+with no `/manifest` request. Use the same backend URL as in
+`vite.config.ts`: consent choices go to it, and so does an `/init` request
+when the policy depends on the visitor's country or region and the browser
+does not know it. That request returns the backend's current policy, which can
+be newer than the snapshot. Vite reads `VITE_C15T_BACKEND_URL` at build time
+for both files, so set it before you build, not when you serve the files.
+
+To apply policy edits without rebuilding, remove `consentManifest` and use
+`hosted({ url })` from `c15t/react` as the mode. The browser then requests the
+policy from `/init` on every page load.
 
 Wrap your app with it in `src/main.tsx`:
 
@@ -128,68 +187,8 @@ createRoot(root).render(
 
 Keep `Consent` mounted for the life of the app. If you use a client-side
 router, render the router inside `Consent` so navigation does not remount the
-provider. The stylesheet import in `src/consent.tsx` styles the banner and
-dialog; import it once.
-
-## Bundle the manifest during builds
-
-The build fetches your public policy once and bundles it, so the server never
-fetches it at runtime.
-
-Add `consentManifest` to your existing Vite plugin list:
-
-```ts title="vite.config.ts (plugins option)"
-import { consentManifest } from 'c15t/build';
-
-export default {
-	plugins: [
-		// Keep your existing framework plugins here.
-		consentManifest({ backendURL: 'https://your-project.inth.app' }),
-	],
-};
-```
-
-Vite writes `src/c15t-manifest.ts` before compiling, including at development
-startup. Keep the generated file out of Git. Install `@c15t/browser@alpha` for
-its browser manifest transport. In the quickstart's `src/consent.tsx`, replace
-the `hosted()` mode with this factory:
-
-```tsx title="src/consent.tsx"
-import { manifest } from '@c15t/browser/headless';
-
-import { consentManifest } from './c15t-manifest';
-
-const mode = manifest({
-	backendURL: 'https://your-project.inth.app',
-	manifest: consentManifest,
-});
-```
-
-Keep passing `mode` to `ConsentProvider`. The browser resolves the snapshot
-without `/manifest` when it has the geography the policy needs, or the policy
-does not depend on geography. Supply known country and region through `inputs`
-or overrides to keep regional resolution on the snapshot.
-
-When the required country or region is missing, the transport calls backend
-`/init` and uses its resolved policy and translations. That response can use
-newer backend policy than the build snapshot. This is a full consent resolution,
-so these visitors still wait for a backend round trip.
-
-Policy and resolver code are part of the browser bundle.
-
-The snapshot is fixed at build time:
-
-* Rebuild after changing policies, translations or vendors. If your CI caches
-  build output, force a fresh build.
-* The build must reach the backend. A failed fetch fails the build.
-* Consent choices still go to the backend.
-
-Run `vite build` or `vite dev` before a standalone `tsc`, `vue-tsc` or
-`svelte-check`; the generated file doesn't exist on a fresh checkout.
-
-For policy updates without a rebuild, keep the original `hosted()` factory
-and omit the build plugin. That setup resolves policy through the backend
-`/init` on each page load.
+provider. There is no stylesheet to import: the banner and dialog render their
+own rules as `<style>` elements.
 
 ## Gate your own features
 
@@ -215,8 +214,8 @@ Build and preview the production bundle with `vite build` and `vite preview`,
 then open the site in a private window with DevTools open on the Network tab.
 Test under a policy that asks for a choice, such as an EU opt-in policy.
 
-1. **Before a choice.** The banner shows. There are no requests to
-   `posthog.com`.
+1. **Before a choice.** The banner shows, with no `/manifest` request. There
+   are no requests to `posthog.com`.
 2. **Reject All.** The banner closes and the vendor requests stay absent.
 3. **Reload.** The banner stays closed and the vendor requests stay absent.
 4. **Privacy settings.** The footer link opens the dialog with **Analytics** (the

package/docs/frameworks/react/rendering.md

@@ -25,6 +25,9 @@ explains the difference in general terms.
 
 ## Bundle the manifest during Vite builds
 
+The [quickstart](./quickstart.md) and `examples/react` in
+the c15t repository use this setup.
+
 The build fetches your public policy once and bundles it, so the server never
 fetches it at runtime.
 
@@ -43,8 +46,8 @@ export default {
 
 Vite writes `src/c15t-manifest.ts` before compiling, including at development
 startup. Keep the generated file out of Git. Install `@c15t/browser@alpha` for
-its browser manifest transport. In the quickstart's `src/consent.tsx`, replace
-the `hosted()` mode with this factory:
+its browser manifest transport. In `src/consent.tsx`, create the provider's
+mode with `manifest()` instead of `hosted()`:
 
 ```tsx title="src/consent.tsx"
 import { manifest } from '@c15t/browser/headless';
@@ -73,23 +76,27 @@ The snapshot is fixed at build time:
 
 * Rebuild after changing policies, translations or vendors. If your CI caches
   build output, force a fresh build.
-* The build must reach the backend. A failed fetch fails the build.
+* The build must reach the backend. A failed fetch stops Next.js, TanStack
+  Start, SvelteKit and Vite builds. By default, Astro and Nuxt log a warning
+  instead and fetch the policy at runtime.
 * Consent choices still go to the backend.
 
 Run `vite build` or `vite dev` before a standalone `tsc`, `vue-tsc` or
-`svelte-check`; the generated file doesn't exist on a fresh checkout.
+`svelte-check`; the generated file doesn't exist on a fresh checkout. Both
+commands fetch the manifest when they start, so both need the backend.
+`vite preview` serves the last build without fetching.
 
-For policy updates without a rebuild, keep the original `hosted()` factory
-and omit the build plugin. That setup resolves policy through the backend
-`/init` on each page load.
+For policy updates without a rebuild, use `hosted({ url })` from `c15t/react`
+as the mode and omit the build plugin. That setup resolves policy through the
+backend `/init` on each page load.
 
 ## Client-rendered apps
 
 The recommended [quickstart](./quickstart.md) bundles the
 manifest and resolves it in the browser. See [build-time manifests](#bundle-the-manifest-during-vite-builds).
 
-For policy updates without rebuilding, keep `hosted({ url })`. That runtime
-path works as follows:
+For policy updates without rebuilding, use `hosted({ url })` from
+`c15t/react` as the mode. That runtime path works as follows:
 
 1. The page loads with no consent state. Every optional category is denied.
 2. `ConsentProvider` requests `GET /init` from your backend URL while it first
@@ -120,8 +127,8 @@ browser takes over after hydration:
 * The server render and the first browser render agree, so hydration does not
   warn or change a stored choice.
 
-One detail differs from the Vite setup: import `c15t/react/styles.css` where
-your framework loads global CSS, so the server HTML links it.
+The Vite setup needs no change. The banner renders in the browser and brings
+its own `<style>` element, so there is no stylesheet to import.
 
 ### Skip the browser's first init request
 
@@ -182,7 +189,12 @@ With `hosted({ url })`, the browser calls two backend endpoints:
 | `GET {url}/init`      | Once per page load, to resolve the policy  |
 | `POST {url}/subjects` | When the visitor accepts, rejects or saves |
 
-Both go to the backend's origin, so it must list your site as a trusted origin.
+With a bundled manifest, `manifest({ backendURL })` sends the same
+`/subjects` request, and requests `/init` only when the policy depends on a
+country or region the browser does not know.
+
+These requests go to the backend's origin, so it must list your site as a
+trusted origin.
 [Data fetching](../../concepts/data-fetching.md) compares this with proxies and
 custom transports.
 

package/docs/frameworks/react/scripts.md

@@ -28,20 +28,23 @@ export const scripts = [
 The provider in `src/consent.tsx` receives them:
 
 ```tsx title="src/consent.tsx"
+import { manifest } from '@c15t/browser/headless';
 import {
 	ConsentBanner,
 	ConsentDialog,
 	ConsentDialogLink,
 	ConsentProvider,
-	hosted,
 } from 'c15t/react';
 import type { ReactNode } from 'react';
 
+import { consentManifest } from './c15t-manifest';
 import { scripts } from './scripts';
 
-import 'c15t/react/styles.css';
-
-const mode = hosted({ url: 'https://your-project.inth.app' });
+const mode = manifest({
+	backendURL:
+		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
+	manifest: consentManifest,
+});
 
 export const Consent = ({ children }: { children: ReactNode }) => (
 	<ConsentProvider options={{ mode, scripts }}>

package/docs/frameworks/react/troubleshooting.md

@@ -5,30 +5,67 @@ description: Fix a missing banner, early vendor requests, unstyled components
 group: frameworks
 ---
 
-## The /init request goes to your-project.inth.app
+## Why does the build fail to download the manifest?
 
-**Check.** In DevTools Network, the `GET` request to `/init` goes to
-`your-project.inth.app` and fails.
+**Check.** `vite build` or `vite dev` stops before compiling, with an error
+from `consentManifest` that starts with `@c15t/core/build:`.
 
-**Fix.** Replace the placeholder URL in `hosted({ url })` in `src/consent.tsx`
-with the backend URL from your Inth project, exactly as Inth shows it, then
-rebuild.
+| Error                                                    | Cause                                                                                                                           | Fix                                                                                  |
+| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| `build-time manifests require an absolute upstream URL.` | `backendURL` is empty or relative, such as `/api/c15t`                                                                          | Pass the absolute backend URL from your Inth project                                 |
+| `build-time manifests require an http(s) upstream URL.`  | `backendURL` uses another protocol                                                                                              | Use the `https://` URL Inth shows                                                    |
+| `/manifest responded 404`                                | The URL is not your project's backend, such as the `https://your-project.inth.app` placeholder or a URL missing its path prefix | Copy the backend URL exactly as Inth shows it, or set `VITE_C15T_BACKEND_URL`        |
+| `/manifest returned an invalid consent manifest.`        | The URL answered with something other than a consent manifest, such as an HTML page                                             | Point `backendURL` at the backend itself, not your site or a dashboard page          |
+| `fetch failed`                                           | The build cannot reach the backend                                                                                              | Build where the backend is reachable. A failed download never reuses an old snapshot |
+
+## Why can't TypeScript find ./c15t-manifest?
+
+**Check.** `tsc`, `vue-tsc` or your editor reports that it cannot find the
+module `./c15t-manifest`, on a fresh checkout or in CI.
+
+**Fix.** `consentManifest` writes `src/c15t-manifest.ts` when `vite build` or
+`vite dev` starts, and the file is not in Git. Run one of them before the type
+check. In CI, run the build first, or cache the generated file with the build
+output.
 
 ## There is no banner
 
 **Check.** In DevTools Network, find the `GET` request to `/init` on your
-backend URL.
+backend URL. With the bundled manifest, the browser makes no request before
+the banner unless the policy depends on a country or region it does not know.
 
-| What you see                    | Cause                                                                                  | Fix                                                                                                           |
-| ------------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| No `/init` request              | `ConsentProvider` is not mounted, or an error stopped `src/consent.tsx` from rendering | Check the console for errors and render one provider at the app root, as in the [quickstart](./quickstart.md) |
-| `/init` fails with a CORS error | Your site's origin is not trusted                                                      | Add the exact origin, including port in development, to the trusted origins in your Inth project              |
-| `/init` returns 200             | The policy for this visitor asks for no banner, or a stored choice is still valid      | Inspect the active policy with the component below, or clear site data                                        |
+| What you see                    | Cause                                                                                                                         | Fix                                                                                                                                                               |
+| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| No request and no banner        | `ConsentProvider` is not mounted, an error stopped `src/consent.tsx` from rendering, or the bundled policy asks for no banner | Check the console for errors, render one provider at the app root as in the [quickstart](./quickstart.md), and inspect the active policy with the component below |
+| `/init` fails with a CORS error | Your site's origin is not trusted                                                                                             | Add the exact origin, including port in development, to the trusted origins in your Inth project                                                                  |
+| `/init` returns 200             | The policy for this visitor asks for no banner, or a stored choice is still valid                                             | Inspect the active policy with the component below, or clear site data                                                                                            |
 
 A policy with `prompt: 'none'` shows no banner by design, and so does a
 returning visitor with a valid stored choice. [Policies](../../concepts/policies.md)
 explains why a region may not show one.
 
+## The page throws that no IABProvider is mounted
+
+The visitor's policy uses the `iab` model and the backend sent its vendor
+list, but no `IABProvider` is mounted. The standard banner and dialog do
+not handle the IAB model, so they throw rather than leave the visitor
+with no consent UI. Server and browser render the same error.
+
+Fix it one of two ways:
+
+* If the site uses IAB TCF, render `IABProvider` with `IABConsentBanner`
+  and `IABConsentDialog` from `c15t/react/iab` inside your consent
+  provider. They can sit next to the standard banner.
+* If it does not, remove the `iab` model from the policy for that region
+  in your Inth project or policy pack.
+
+A backend that answers `gvl: null` turns IAB off for that request. The
+policy then runs as opt-in and nothing throws.
+
+The check passes once `c15t/react/iab` has loaded. If you import the IAB
+components with a dynamic `import()`, a render of the standard banner
+that happens before the import finishes still throws.
+
 ## Inspect the active policy
 
 Render this component inside `ConsentProvider`. It reads state and records no
@@ -76,13 +113,27 @@ covers the options.
 ## The banner has no styles
 
 **Check.** In DevTools Elements, the banner has classes but no rules apply.
-
-**Fix.** Import `c15t/react/styles.css` once in the module that renders the
-provider. With Tailwind 3, keep that import above the `@tailwind` directives
-and add `c15t/postcss-tailwind3` before `tailwindcss` in your PostCSS
-config. Without the plugin, Tailwind 3 drops c15t's rules or fails the build
-with `` `@layer components` is used but no matching `@tailwind components` directive is present ``.
-See [Tailwind CSS](../../customization/tailwind.md#set-up-tailwind-css-3).
+Look for c15t's `<style>` element: `<style data-href="c15t-first-paint">` in
+`<head>` on React 19, or `<style data-c15t-styles>` next to the banner on
+React 18 or with a `nonce`. Check the console for a Content Security Policy
+error.
+
+**Fix.**
+
+* No c15t `<style>` element: the provider sets `styles: false` or `noStyle`.
+  With `styles: false`, import `c15t/react/styles.css` once in the module
+  that renders the provider.
+* The console reports a blocked inline style: set the provider's `nonce`, as
+  [Content Security Policy](./content-security-policy.md)
+  shows.
+* Under Tailwind 3, buttons lose their padding and cards their borders:
+  Tailwind 3's unlayered preflight beats c15t's layered rules. Set
+  `styles: false`, import `c15t/react/styles.css` above the `@tailwind`
+  directives and add `c15t/postcss-tailwind3` before `tailwindcss` in your
+  PostCSS config. Without the plugin, Tailwind 3 drops c15t's rules or fails
+  the build with
+  `` `@layer components` is used but no matching `@tailwind components` directive is present ``.
+  See [Tailwind CSS](../../customization/tailwind.md#set-up-tailwind-css-3).
 
 ## The console warns that theme tokens are no longer turned into CSS
 

package/docs/frameworks/react/upgrade-v3.md

@@ -51,13 +51,13 @@ Remove `@c15t/react` and `@c15t/scripts`, then install `c15t` from the
 
 Drop `@c15t/integrations@alpha` if you don't use its vendor helpers.
 
-| v2 import                               | v3 import                             |
-| --------------------------------------- | ------------------------------------- |
-| `@c15t/react`                           | `c15t/react`                          |
-| `@c15t/react/headless`                  | `c15t/react/headless`                 |
-| `@c15t/react/styles.css`                | `c15t/react/styles.css`               |
-| `DevTools` from `@c15t/dev-tools/react` | `DevTools` from `c15t/react/devtools` |
-| `@c15t/scripts/*`                       | `@c15t/integrations/*`                |
+| v2 import                               | v3 import                                                                          |
+| --------------------------------------- | ---------------------------------------------------------------------------------- |
+| `@c15t/react`                           | `c15t/react`                                                                       |
+| `@c15t/react/headless`                  | `c15t/react/headless`                                                              |
+| `@c15t/react/styles.css`                | Nothing: remove the import. Keep `c15t/react/styles.css` only with `styles: false` |
+| `DevTools` from `@c15t/dev-tools/react` | `DevTools` from `c15t/react/devtools`                                              |
+| `@c15t/scripts/*`                       | `@c15t/integrations/*`                                                             |
 
 `@c15t/react` is still published at v3, so its imports keep working if you pin
 it to `@alpha`. These docs use `c15t/react`.
@@ -448,16 +448,22 @@ A generated theme uses `:root:root`, so your own `--c15t-*` values on plain
 
 ### Stylesheets
 
-* Dialog and preference styles moved from `styles.css` to
-  `@c15t/ui/styles/dialog.css`. The React, Next.js and TanStack Start dialogs
-  import it themselves. Import it yourself only if you render `@c15t/ui`
-  class maps for those parts.
-* `iab/styles.css` no longer repeats the default tokens. Import it after
-  `styles.css`.
-* Tailwind CSS 3 builds now fail without a PostCSS plugin, even with
-  `styles.tw3.css`, because the dialog stylesheet is imported from JavaScript.
-  Add `'c15t/postcss-tailwind3': {}` before `tailwindcss` in
-  `postcss.config`. See [Tailwind CSS 3](../../customization/tailwind.md#set-up-tailwind-css-3).
+* Remove the c15t stylesheet import, such as `@c15t/react/styles.css` or
+  `@c15t/nextjs/styles.css`. The stock components in `c15t/react`,
+  `c15t/next` and `c15t/tanstack-start` render the rules they use as
+  `<style>` elements, so no stylesheet request holds back the first paint. An
+  import you keep still styles the components, but the rules ship twice and
+  the stylesheet still delays the first paint.
+* Keep an import of the v3 stylesheet, such as `c15t/react/styles.css`, only
+  with Tailwind CSS 3 or a named cascade layer, and set
+  `styles: false` in the provider options so the components add no second
+  copy. See
+  [stylesheets and CSS layers](../../customization/stylesheets.md#import-the-stylesheet-yourself).
+* With manual styles, `iab/styles.css` no longer repeats the default tokens.
+  Import it after `styles.css`. Automatic IAB styling needs neither import.
+* Tailwind CSS 3 needs a PostCSS plugin for c15t's `styles.css`. Add
+  `'c15t/postcss-tailwind3': {}` before `tailwindcss` in `postcss.config`,
+  and set `styles: false`. See [Tailwind CSS 3](../../customization/tailwind.md#set-up-tailwind-css-3).
   Create React App can't run the plugin. The `postcss-tailwind3` codemod adds
   it to an object-form `postcss.config` and warns about configs it can't
   edit.

package/docs/frameworks/react/vendor-consent.md

@@ -22,6 +22,10 @@ TC string instead; see [IAB TCF](./iab.md).
 
 ## Declare the vendors
 
+Built-in `@c15t/integrations` helpers already list their vendor by name, so
+you only declare a vendor for a script of your own, or to replace a helper's
+name and privacy policy.
+
 Declare the vendors next to the scripts in `src/scripts.ts`, using the `vendor`
 slug each script already carries:
 
@@ -66,11 +70,19 @@ helper sets `vendor` to its script ID, so `xPixel()` is `x-pixel`, `gtag()`
 is `gtag` and `cloudflareZaraz()` is `cloudflare-zaraz`. Each
 [vendor guide](../../integrations/overview.md) names its slug.
 
-Declaring a helper's vendor is optional. Without a declaration the script
-still loads with its category, but the dialog has no switch for it. In
-development, c15t logs a console warning that names the slug, so you can
-declare it if visitors should be able to turn it off. Production builds
-skip the warning.
+You don't need to declare a helper's vendor. Each helper also sets
+`vendorDetails` on its script: the vendor's name, privacy policy, homepage
+and legal entity. The dialog lists the vendor with its own switch from
+those. Declare the vendor in `vendors` to replace them, for example to link
+your own data processing notice, or when you self-host a tool such as
+Matomo, Umami, Plausible or PostHog and the vendor's privacy policy doesn't
+cover your install. A declaration replaces `vendorDetails` as a whole and
+doesn't merge with it.
+
+Your own scripts can set `vendorDetails` too. A script with a `vendor` slug
+and no `name` and `privacyPolicyUrl` from any source still loads with its
+category, but the dialog has no switch for it. In development, c15t logs a
+console warning that names the slug. Production builds skip the warning.
 
 A self-hosted backend can declare vendors too. `/init` returns them and c15t
 merges them with the vendors in code. When both declare the same `id`, the
@@ -165,8 +177,8 @@ the same as withdrawing a category, so code the vendor already ran stops.
 Test the production build in a private window with DevTools Network open and
 filtered to `ads-twitter.com`:
 
-1. Declare `x-pixel` and register `xPixel()`. Open Privacy settings. The
-   marketing row lists X Pixel with a switch.
+1. Register `xPixel()`. Open Privacy settings. The marketing row lists X
+   Pixel with a switch.
 2. Allow marketing and save. `uwt.js` loads.
 3. Open Privacy settings, switch X Pixel off and save. c15t reloads the
    page. After the reload there is no `uwt.js` request, and other marketing

package/docs/guides/banner-experiments.md

@@ -32,8 +32,6 @@ import type { ReactNode } from 'react';
 
 import { scripts } from './scripts';
 
-import 'c15t/react/styles.css';
-
 const mode = hosted({ url: 'https://your-project.inth.app' });
 
 // `control` is the stock banner. `wall` blocks the page until the visitor
@@ -258,7 +256,7 @@ import { resolveConsent } from 'c15t/next/server';
 import { Suspense } from 'react';
 import type { ReactNode } from 'react';
 
-import { consentConfig } from '@/c15t.config';
+import { consentOptions } from '@/c15t.server';
 import { ExperimentConsent } from '@/components/experiment-consent';
 import { bannerExperiment } from '@/lib/experiment';
 import { bannerExperimentFlag } from '@/lib/flags';
@@ -268,7 +266,7 @@ import '@/styles/globals.css';
 const ResolvedConsent = async ({ children }: { children: ReactNode }) => {
 	const arm = await bannerExperimentFlag();
 	const state = await resolveConsent({
-		config: consentConfig,
+		...consentOptions,
 		// `off` keeps this visitor out of the experiment.
 		experiment: arm === 'off' ? undefined : { ...bannerExperiment, arm },
 	});