@c15t/react 3.0.0-alpha.9 → 3.0.0

package/docs/customization/slots.md

@@ -12,15 +12,15 @@ Each framework has one way to add classes, inline styles or attributes to a
 single part of a stock component. The keys differ between the two
 vocabularies, so a configuration from one does not work in the other.
 
-| Framework               | Part API                                                      | Keys look like            | Class key                |
-| ----------------------- | ------------------------------------------------------------- | ------------------------- | ------------------------ |
-| Next.js, TanStack Start | `options.components` on `ConsentRoot`                         | `components.banner.card`  | `className`              |
-| React                   | `components` in the `ConsentProvider` options                 | `components.banner.card`  | `className`              |
-| Nuxt                    | `components` in the `c15t` options, or in `app/app.config.ts` | `components.banner.card`  | `class`                  |
-| Vue                     | `components` in the `c15tVue` options                         | `components.banner.card`  | `class`                  |
-| Astro                   | `theme.slots` in the `c15t()` integration options             | `slots.consentBannerCard` | A string, or `className` |
-| Svelte, SvelteKit       | `theme.slots` on `ConsentManagerProvider`                     | `slots.consentBannerCard` | A string, or `className` |
-| HTML, JavaScript        | `ui.theme.slots`                                              | `slots.consentBannerCard` | A string, or `className` |
+| Framework               | Part API                                                                 | Keys look like            | Class key                |
+| ----------------------- | ------------------------------------------------------------------------ | ------------------------- | ------------------------ |
+| Next.js, TanStack Start | `options.components` in Next.js `c15t.config.ts`, or on `ConsentRoot`    | `components.banner.card`  | `className`              |
+| React                   | `components` in the `ConsentProvider` options                            | `components.banner.card`  | `className`              |
+| Nuxt                    | `components` in the `c15t` options, or in `app/app.config.ts`            | `components.banner.card`  | `class`                  |
+| Vue                     | `components` in the `c15tVue` options                                    | `components.banner.card`  | `class`                  |
+| Astro                   | `theme.slots` in the `c15t()` integration options                        | `slots.consentBannerCard` | A string, or `className` |
+| Svelte, SvelteKit       | `theme.slots` on `ConsentProvider` (Svelte) or `ConsentRoot` (SvelteKit) | `slots.consentBannerCard` | A string, or `className` |
+| HTML, JavaScript        | `ui.theme.slots`                                                         | `slots.consentBannerCard` | A string, or `className` |
 
 React and Vue also read `theme.slots` from the theme in their options, and
 apply each slot to the matching `components` part, such as
@@ -65,22 +65,22 @@ Modules, vanilla-extract, StyleX and Emotion, and
 
 ## Banner parts
 
-| Part                                        | `components` key                     | `theme.slots` key                  | `data-testid`         |
-| ------------------------------------------- | ------------------------------------ | ---------------------------------- | --------------------- |
-| Positioning root, with the state attributes | `banner.root`                        | `consentBanner`                    | `consent-banner-root` |
-| Card sizing and branding container          | `banner.cardShell`                   | None                               |                       |
-| Visible card                                | `banner.card`                        | `consentBannerCard`                | `consent-banner-card` |
-| Title and description container             | `banner.header`                      | `consentBannerHeader`              |                       |
-| Title                                       | `banner.title`                       | `consentBannerTitle`               |                       |
-| Description                                 | `description.banner`                 | `consentBannerDescription`         |                       |
-| Action area                                 | `banner.footer`                      | `consentBannerFooter`              |                       |
-| Group of action groups                      | `banner.actions`                     | None                               |                       |
-| One group of equally prominent actions      | `banner.actionGroup`                 | `consentBannerFooterSubGroup`      |                       |
-| Group of right links                        | `banner.rights`                      | `consentBannerRights`              |                       |
-| One right link                              | `banner.rightLink`                   | `consentBannerRightLink`           |                       |
-| Backdrop of a blocking banner               | `banner.overlay`                     | `consentBannerOverlay`             |                       |
-| "Secured by" tag                            | `tag.banner`                         | `consentBannerTag`                 |                       |
-| Filled and outlined buttons                 | `button.primary`, `button.secondary` | `buttonPrimary`, `buttonSecondary` |                       |
+| Part                                        | `components` key                     | `theme.slots` key                  | `data-testid`             |
+| ------------------------------------------- | ------------------------------------ | ---------------------------------- | ------------------------- |
+| Positioning root, with the state attributes | `banner.root`                        | `consentBanner`                    | `consent-banner-root`     |
+| Card sizing and branding container          | `banner.cardShell`                   | None                               |                           |
+| Visible card                                | `banner.card`                        | `consentBannerCard`                | `consent-banner-card`     |
+| Title and description container             | `banner.header`                      | `consentBannerHeader`              |                           |
+| Title                                       | `banner.title`                       | `consentBannerTitle`               |                           |
+| Description                                 | `description.banner`                 | `consentBannerDescription`         |                           |
+| Action area                                 | `banner.footer`                      | `consentBannerFooter`              |                           |
+| Group of action groups                      | `banner.actions`                     | None                               |                           |
+| One group of equally prominent actions      | `banner.actionGroup`                 | `consentBannerFooterSubGroup`      |                           |
+| Group of right links                        | `banner.rights`                      | `consentBannerRights`              |                           |
+| One right link                              | `banner.rightLink`                   | `consentBannerRightLink`           |                           |
+| Backdrop of a blocking banner               | `banner.overlay`                     | `consentBannerOverlay`             |                           |
+| "Secured by" tag                            | `tag.banner`                         | `consentBannerTag`                 | `consent-banner-branding` |
+| Filled and outlined buttons                 | `button.primary`, `button.secondary` | `buttonPrimary`, `buttonSecondary` |                           |
 
 The button parts apply to every c15t button of that style, in the banner and
 the dialog. The script tag's banner has no rights group, so

package/docs/customization/stylesheets.md

@@ -104,20 +104,18 @@ need control over the file:
   cache performs better for your site's repeat visits. Compare cold and warm
   visits on your production host before choosing this option.
 
-| Framework         | Option                                       | Files to import                                                                        |
-| ----------------- | -------------------------------------------- | -------------------------------------------------------------------------------------- |
-| Next.js           | `options.styles` on `ConsentRoot`            | `c15t/next/styles.css`, and `c15t/next/iab/styles.css` for IAB TCF                     |
-| TanStack Start    | `options.styles` on `ConsentRoot`            | `c15t/tanstack-start/styles.css`, and `c15t/tanstack-start/iab/styles.css` for IAB TCF |
-| React             | `options.styles` on `ConsentProvider`        | `c15t/react/styles.css`, and `c15t/react/iab/styles.css` for IAB TCF                   |
-| Svelte, SvelteKit | `options.styles` on `ConsentManagerProvider` | `@c15t/svelte/styles.css`, and `@c15t/svelte/iab/styles.css` for IAB TCF               |
-| Astro             | `styles` in the `c15t()` integration options | See [load Astro's stylesheets yourself](#load-astros-stylesheets-yourself)             |
-
-```tsx title="components/consent.tsx (partial)"
-<ConsentRoot
-	state={state}
-	config={consentConfig}
-	options={{ styles: false }}
->
+| Framework         | Option                                                   | Files to import                                                                        |
+| ----------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| Next.js           | `options.styles` in `c15t.config.ts` or on `ConsentRoot` | `c15t/next/styles.css`, and `c15t/next/iab/styles.css` for IAB TCF                     |
+| TanStack Start    | `options.styles` on `ConsentRoot`                        | `c15t/tanstack-start/styles.css`, and `c15t/tanstack-start/iab/styles.css` for IAB TCF |
+| React             | `options.styles` on `ConsentProvider`                    | `c15t/react/styles.css`, and `c15t/react/iab/styles.css` for IAB TCF                   |
+| Svelte, SvelteKit | `options.styles` on `ConsentProvider` or `ConsentRoot`   | `@c15t/svelte/styles.css`, and `@c15t/svelte/iab/styles.css` for IAB TCF               |
+| Astro             | `styles` in the `c15t()` integration options             | See [load Astro's stylesheets yourself](#load-astros-stylesheets-yourself)             |
+
+```ts title="c15t.config.ts (Next.js)"
+import { defineConsentConfig } from 'c15t/next';
+
+export default defineConsentConfig({ options: { styles: false } });
 ```
 
 `styles: false` turns off only the stylesheets. Tokens from `ConsentTheme`

package/docs/customization/tailwind.md

@@ -111,9 +111,10 @@ Add `@tailwindcss/vite` under `vite.plugins` and list your CSS entry in
 
 ```ts title="nuxt.config.ts"
 import tailwindcss from '@tailwindcss/vite';
+import { hosted } from 'c15t/vue';
 
 export default defineNuxtConfig({
-	c15t: { backendURL: '/api/c15t' },
+	c15t: { backendURL: '/api/c15t', mode: hosted() },
 	compatibilityDate: '2026-07-04',
 	css: ['~/assets/css/main.css'],
 	modules: ['c15t/vue'],
@@ -138,10 +139,12 @@ Tailwind:
 ```ts title="vite.config.ts"
 import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
-import c15tVue from 'c15t/vue/vite';
+import { consentManifest } from 'c15t/vue/vite';
 import { defineConfig } from 'vite';
 
-export default defineConfig({ plugins: [vue(), c15tVue(), tailwindcss()] });
+export default defineConfig({
+	plugins: [vue(), consentManifest({ backendURL: '/api/c15t' }), tailwindcss()],
+});
 ```
 
 Import this stylesheet from `src/main.ts`:
@@ -272,9 +275,10 @@ They are the same plugin. A config that already lists
 
 Make four changes:
 
-1. Set `styles: false` where you configure c15t: `options` on `ConsentRoot`
-   in Next.js and TanStack Start, `options` on `ConsentProvider` in React,
-   and `styles={false}` on `ConsentManagerProvider` in Svelte and SvelteKit.
+1. Set `styles: false` where you configure c15t: `options` in Next.js
+   `c15t.config.ts`, `options` on `ConsentRoot` in TanStack Start, `options`
+   on `ConsentProvider` in React, and `styles={false}` on `ConsentProvider` in
+   Svelte or `ConsentRoot` in SvelteKit.
    Vue, Nuxt and Astro need no change.
 2. Add the plugin to your PostCSS plugins, before `tailwindcss`. Write the plugins as an object, as the examples below do.
    PostCSS runs them in the order of the keys. Next.js also accepts an array
@@ -415,8 +419,10 @@ Nuxt reads PostCSS plugins from `postcss.plugins` in `nuxt.config.ts`, in
 the order listed:
 
 ```ts title="nuxt.config.ts"
+import { hosted } from 'c15t/vue';
+
 export default defineNuxtConfig({
-	c15t: { backendURL: '/api/c15t' },
+	c15t: { backendURL: '/api/c15t', mode: hosted() },
 	compatibilityDate: '2026-07-04',
 	css: ['~/assets/css/main.css'],
 	modules: ['c15t/vue'],
@@ -536,7 +542,7 @@ export default {
 
 Import `@c15t/svelte/styles.css` above the directives, import this
 stylesheet from `src/main.ts`, and pass `styles={false}` to
-`ConsentManagerProvider`:
+`ConsentProvider`:
 
 ```css title="src/app.css"
 /* Vite ignores an @import below other rules, so it goes first. */
@@ -572,7 +578,7 @@ export default {
 
 Import `@c15t/svelte/styles.css` above the directives, import this
 stylesheet from your root `+layout.svelte`, and pass `styles={false}` to
-`ConsentManagerProvider`:
+`ConsentRoot`:
 
 ```css title="src/app.css"
 /* Vite ignores an @import below other rules, so it goes first. */
@@ -677,12 +683,12 @@ Add the classes to `components` in the `c15tVue` options. Vue takes
 
 ```ts title="src/main.ts"
 .use(c15tVue, {
-	backendURL: '/api/c15t',
 	components: {
 		banner: {
 			root: { class: 'p-[7px] dark:p-[11px]' },
 		},
 	},
+	mode: hosted(),
 })
 ```
 
@@ -816,7 +822,7 @@ instead:
 ```
 
 Import `@c15t/browser/styles.css` above the directives in your Tailwind entry.
-Install `@c15t/browser@alpha`, which provides both the stylesheet and
+Install `@c15t/browser`, which provides both the stylesheet and
 `@c15t/browser/postcss-tailwind3`:
 
 ```css title="style.css"

package/docs/customization/tokens.md

@@ -40,13 +40,13 @@ export const theme = defineTheme({
 Install `@c15t/ui` if importing its theme helper directly. Where the theme
 goes depends on the framework:
 
-| Framework                      | Tokens                                                                                                                            | `consentActions`                    |
-| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
-| Next.js, TanStack Start, React | `<ConsentTheme theme={theme} />`, rendered on the server where the app has one                                                    | `theme` in the provider options     |
-| Nuxt, Vue                      | `theme` or `tokens` in the module or plugin options                                                                               | Not available                       |
-| Astro                          | `theme` in the integration options                                                                                                | The same `theme`                    |
-| Svelte, SvelteKit              | `generateThemeCSS(theme)` from `@c15t/ui/theme` on the server, in a `<style>` element, or `--c15t-*` variables in your stylesheet | `theme` on `ConsentManagerProvider` |
-| HTML, JavaScript               | `ui.theme`                                                                                                                        | Not available                       |
+| Framework                      | Tokens                                                                                                                            | `consentActions`                                                   |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| Next.js, TanStack Start, React | `<ConsentTheme theme={theme} />`, rendered on the server where the app has one                                                    | `theme` in the provider options                                    |
+| Nuxt, Vue                      | `theme` or `tokens` in the module or plugin options                                                                               | Not available                                                      |
+| Astro                          | `theme` in the integration options                                                                                                | The same `theme`                                                   |
+| Svelte, SvelteKit              | `generateThemeCSS(theme)` from `@c15t/ui/theme` on the server, in a `<style>` element, or `--c15t-*` variables in your stylesheet | `theme` on `ConsentProvider` (Svelte) or `ConsentRoot` (SvelteKit) |
+| HTML, JavaScript               | `ui.theme`                                                                                                                        | Not available                                                      |
 
 React and Svelte providers do not turn tokens in their `theme` option into
 CSS, and warn in development when a theme holds tokens but the page has no
@@ -169,6 +169,35 @@ them, on any screen size.
 Test long translations and small screens after changing width or typography.
 A compact banner must still fit the required actions.
 
+## Stack the banner with your own layers
+
+The banner and its overlay sit at the top of the page's stacking order by
+default. Lower them when a navbar, drawer, or chat widget should cover the
+banner.
+
+| Variable                               | Default  | Target                        |
+| -------------------------------------- | -------- | ----------------------------- |
+| `--consent-banner-z-index`             | `999998` | Banner                        |
+| `--consent-banner-overlay-z-index`     | `999997` | Backdrop of a blocking banner |
+| `--iab-consent-banner-z-index`         | `999998` | IAB TCF banner                |
+| `--iab-consent-banner-overlay-z-index` | `999997` | IAB TCF banner backdrop       |
+| `--consent-dialog-z-index`             | `999999` | Preferences dialog            |
+| `--consent-dialog-overlay-z-index`     | `999998` | Preferences dialog backdrop   |
+
+```css
+:root {
+  --consent-banner-z-index: 40;
+  --consent-banner-overlay-z-index: 39;
+}
+```
+
+Keep each z-index above its overlay's, or the backdrop covers the card it
+belongs to. Keep the dialog above the banner so Customize opens on top.
+
+Only the card and the "Secured by" tag take clicks. Clicks on the space
+around a floating card, or beside the tag on a bar, reach the page. A
+blocking banner catches every click.
+
 ## Restyle the "Secured by" tag
 
 The tag sits on the edge of the banner and dialog cards and uses the primary

package/docs/frameworks/react/components/consent-banner.md

@@ -12,26 +12,30 @@ The [quickstart](../quickstart.md) mounts both in
 `src/consent.tsx`:
 
 ```tsx title="src/consent.tsx"
-import { manifest } from '@c15t/browser/headless';
+import { posthog } from '@c15t/integrations/posthog';
 import {
 	ConsentBanner,
 	ConsentDialog,
 	ConsentDialogLink,
 	ConsentProvider,
+	hosted,
 } from 'c15t/react';
 import type { ReactNode } from 'react';
 
-import { consentManifest } from './c15t-manifest';
-import { scripts } from './scripts';
-
-const mode = manifest({
-	backendURL:
-		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
-	manifest: consentManifest,
-});
+const options = {
+	// Asks VITE_C15T_BACKEND_URL for each visitor's policy.
+	mode: hosted(),
+	scripts: [
+		posthog({
+			id: 'phc_your_project_key',
+			initOptions: { cookieless_mode: 'never' },
+			loadMode: 'after-consent',
+		}),
+	],
+};
 
 export const Consent = ({ children }: { children: ReactNode }) => (
-	<ConsentProvider options={{ mode, scripts }}>
+	<ConsentProvider options={options}>
 		{children}
 		<ConsentBanner />
 		<ConsentDialog />

package/docs/frameworks/react/components/consent-dialog.md

@@ -14,26 +14,30 @@ group: frameworks
 code.
 
 ```tsx title="src/consent.tsx"
-import { manifest } from '@c15t/browser/headless';
+import { posthog } from '@c15t/integrations/posthog';
 import {
 	ConsentBanner,
 	ConsentDialog,
 	ConsentDialogLink,
 	ConsentProvider,
+	hosted,
 } from 'c15t/react';
 import type { ReactNode } from 'react';
 
-import { consentManifest } from './c15t-manifest';
-import { scripts } from './scripts';
-
-const mode = manifest({
-	backendURL:
-		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
-	manifest: consentManifest,
-});
+const options = {
+	// Asks VITE_C15T_BACKEND_URL for each visitor's policy.
+	mode: hosted(),
+	scripts: [
+		posthog({
+			id: 'phc_your_project_key',
+			initOptions: { cookieless_mode: 'never' },
+			loadMode: 'after-consent',
+		}),
+	],
+};
 
 export const Consent = ({ children }: { children: ReactNode }) => (
-	<ConsentProvider options={{ mode, scripts }}>
+	<ConsentProvider options={options}>
 		{children}
 		<ConsentBanner />
 		<ConsentDialog />

package/docs/frameworks/react/components/consent-provider.md

@@ -14,26 +14,30 @@ The [quickstart](../quickstart.md) does this in
 `src/consent.tsx`:
 
 ```tsx title="src/consent.tsx"
-import { manifest } from '@c15t/browser/headless';
+import { posthog } from '@c15t/integrations/posthog';
 import {
 	ConsentBanner,
 	ConsentDialog,
 	ConsentDialogLink,
 	ConsentProvider,
+	hosted,
 } from 'c15t/react';
 import type { ReactNode } from 'react';
 
-import { consentManifest } from './c15t-manifest';
-import { scripts } from './scripts';
-
-const mode = manifest({
-	backendURL:
-		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
-	manifest: consentManifest,
-});
+const options = {
+	// Asks VITE_C15T_BACKEND_URL for each visitor's policy.
+	mode: hosted(),
+	scripts: [
+		posthog({
+			id: 'phc_your_project_key',
+			initOptions: { cookieless_mode: 'never' },
+			loadMode: 'after-consent',
+		}),
+	],
+};
 
 export const Consent = ({ children }: { children: ReactNode }) => (
-	<ConsentProvider options={{ mode, scripts }}>
+	<ConsentProvider options={options}>
 		{children}
 		<ConsentBanner />
 		<ConsentDialog />
@@ -44,11 +48,14 @@ export const Consent = ({ children }: { children: ReactNode }) => (
 );
 ```
 
-`manifest()` from `@c15t/browser/headless` resolves the policy from the
-snapshot the build bundled, and sends consent choices to `backendURL`. Replace
-the demo project URL with the URL from your Inth project, or set
-`VITE_C15T_BACKEND_URL`. To fetch the policy from the backend on every page
-load instead, pass `hosted({ url })` from `c15t/react`. The Next.js and TanStack Start adapters export `ConsentRoot` instead, which wraps
+`hosted()` from `c15t/react` asks the backend's `/init` for the visitor's
+policy on each page load, and sends consent choices to the same backend. It
+uses the backend URL `consentManifest()` read from `VITE_C15T_BACKEND_URL` or
+`VITE_INTH_PROJECT_URL`. Set one to the backend URL from your Inth project. To
+resolve a bundled policy in the browser instead, pass `manifest()` from
+`c15t/react`; see
+[rendering](../rendering.md#bundle-the-policy-at-build-time).
+The Next.js and TanStack Start adapters export `ConsentRoot` instead, which wraps
 this provider and passes it server-resolved state.
 
 ## Provider options
@@ -61,35 +68,35 @@ the provider to change them. `scripts`, `vendors`, `networkBlocker`,
 `iframeBlocker`, `consentCategories`, `overrides`, `user`, `callbacks` and
 `enabled` apply when they change.
 
-| Option                        | Purpose                                                                                                                                                                          |
-| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `mode`                        | Required. `hosted({ url })` for a backend, `manifest()` from `@c15t/browser/headless` for a bundled policy, `offline()` for local policies, or `custom()` for your own transport |
-| `prefetch`                    | Server-resolved state, or a promise of it, from a framework adapter's server helper                                                                                              |
-| `scripts`                     | Consent-gated vendor scripts. See [scripts and embeds](../scripts.md)                                                                                                            |
-| `vendors`                     | Vendors listed under their category with their own switch. See [vendor consent](../vendor-consent.md)                                                                            |
-| `scriptLoader`                | Options for the script loader module                                                                                                                                             |
-| `networkBlocker`              | Rules that hold `fetch` and `XMLHttpRequest` calls until their category is allowed, or `false`                                                                                   |
-| `iframeBlocker`               | Gates DOM iframes that carry `data-category`. On by default; `false` turns it off                                                                                                |
-| `persistence`                 | Stores the visitor's choice in a cookie and localStorage. On by default                                                                                                          |
-| `storageConfig`               | Storage key and cookie settings for the stored choice                                                                                                                            |
-| `clearOnRevocation`           | Cookies and storage keys to delete when a category is denied                                                                                                                     |
-| `reloadOnConsentRevoked`      | Reload the page after the visitor turns off a granted category or vendor. Defaults to `true`                                                                                     |
-| `consentCategories`           | Categories the preference dialog offers alongside those your scripts use, within the policy's scope                                                                              |
-| `overrides`                   | Force the country, region or language the policy is resolved for, for testing                                                                                                    |
-| `user`                        | Link consent records to a signed-in user                                                                                                                                         |
-| `callbacks`                   | Choice, permission and error events                                                                                                                                              |
-| `i18n`                        | Languages and message overrides                                                                                                                                                  |
-| `legalLinks`                  | Privacy policy and other links shown in the banner and dialog                                                                                                                    |
-| `theme`                       | `consentActions` and slot styles. Tokens go through `ConsentTheme`; see [customize](../customize.md)                                                                             |
-| `components`                  | Slot attributes per component part                                                                                                                                               |
-| `presentation`                | Banner and dialog shape, position and blocking                                                                                                                                   |
-| `experiment`                  | A/B test of `presentation`, read once at mount. See [banner experiments](../../../guides/banner-experiments.md)                                                                  |
-| `journey`                     | Random id that links each `/init` to the save that follows. See [session reports](../../../concepts/data-fetching.md#link-an-init-to-the-save-that-follows)                      |
-| `colorScheme`                 | `'light'`, `'dark'`, `'system'`, or `null` to leave the `c15t-dark` class alone                                                                                                  |
-| `noStyle`, `disableAnimation` | Drop the built-in styles, or turn off animations                                                                                                                                 |
-| `preloadDialog`               | When the deferred `ConsentDialog` starts loading: `'idle'` (default) or `'intent'`; see [ConsentDialog](./consent-dialog.md#behavior)                                            |
-| `nonce`                       | Content Security Policy nonce for script elements c15t inserts                                                                                                                   |
-| `enabled`                     | Set `false` only when you deliberately bypass consent enforcement                                                                                                                |
+| Option                        | Purpose                                                                                                                                                                                                                         |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mode`                        | Required. `hosted()` for the backend's `/init`, `manifest()` for a bundled policy, `offline()` for local policies, all from `c15t/react`, or `custom()` for your own transport. See [consent modes](../../../concepts/modes.md) |
+| `prefetch`                    | Server-resolved state, or a promise of it, from a framework adapter's server helper                                                                                                                                             |
+| `scripts`                     | Consent-gated vendor scripts. See [scripts and embeds](../scripts.md)                                                                                                                                                           |
+| `vendors`                     | Vendors listed under their category with their own switch. See [vendor consent](../vendor-consent.md)                                                                                                                           |
+| `scriptLoader`                | Options for the script loader module                                                                                                                                                                                            |
+| `networkBlocker`              | Rules that hold `fetch` and `XMLHttpRequest` calls until their category is allowed, or `false`                                                                                                                                  |
+| `iframeBlocker`               | Gates DOM iframes that carry `data-category`. On by default; `false` turns it off                                                                                                                                               |
+| `persistence`                 | Stores the visitor's choice in a cookie and localStorage. On by default                                                                                                                                                         |
+| `storageConfig`               | Storage key and cookie settings for the stored choice                                                                                                                                                                           |
+| `clearOnRevocation`           | Cookies and storage keys to delete when a category is denied                                                                                                                                                                    |
+| `reloadOnConsentRevoked`      | Reload the page after the visitor turns off a granted category or vendor. Defaults to `true`                                                                                                                                    |
+| `consentCategories`           | Categories the preference dialog offers alongside those your scripts use, within the policy's scope                                                                                                                             |
+| `overrides`                   | Force the country, region or language the policy is resolved for, for testing                                                                                                                                                   |
+| `user`                        | Link consent records to a signed-in user                                                                                                                                                                                        |
+| `callbacks`                   | Choice, permission and error events                                                                                                                                                                                             |
+| `i18n`                        | Languages and message overrides                                                                                                                                                                                                 |
+| `legalLinks`                  | Privacy policy and other links shown in the banner and dialog                                                                                                                                                                   |
+| `theme`                       | `consentActions` and slot styles. Tokens go through `ConsentTheme`; see [customize](../customize.md)                                                                                                                            |
+| `components`                  | Slot attributes per component part                                                                                                                                                                                              |
+| `presentation`                | Banner and dialog shape, position and blocking                                                                                                                                                                                  |
+| `experiment`                  | A/B test of `presentation`, read once at mount. See [banner experiments](../../../guides/banner-experiments.md)                                                                                                                 |
+| `journey`                     | Random id that links each `/init` to the save that follows. See [session reports](../../../concepts/data-fetching.md#link-an-init-to-the-save-that-follows)                                                                     |
+| `colorScheme`                 | `'light'`, `'dark'`, `'system'`, or `null` to leave the `c15t-dark` class alone                                                                                                                                                 |
+| `noStyle`, `disableAnimation` | Drop the built-in styles, or turn off animations                                                                                                                                                                                |
+| `preloadDialog`               | When the deferred `ConsentDialog` starts loading: `'idle'` (default) or `'intent'`; see [ConsentDialog](./consent-dialog.md#behavior)                                                                                           |
+| `nonce`                       | Content Security Policy nonce for script elements c15t inserts                                                                                                                                                                  |
+| `enabled`                     | Set `false` only when you deliberately bypass consent enforcement                                                                                                                                                               |
 
 `enabled: false` grants categories and allows gated loading while suppressing
 consent UI. It is not a way to fix failed initialization or hide a banner in

package/docs/frameworks/react/components.md

@@ -36,26 +36,30 @@ Most apps start with four components. `ConsentProvider` holds the runtime,
 one file:
 
 ```tsx title="src/consent.tsx"
-import { manifest } from '@c15t/browser/headless';
+import { posthog } from '@c15t/integrations/posthog';
 import {
 	ConsentBanner,
 	ConsentDialog,
 	ConsentDialogLink,
 	ConsentProvider,
+	hosted,
 } from 'c15t/react';
 import type { ReactNode } from 'react';
 
-import { consentManifest } from './c15t-manifest';
-import { scripts } from './scripts';
-
-const mode = manifest({
-	backendURL:
-		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
-	manifest: consentManifest,
-});
+const options = {
+	// Asks VITE_C15T_BACKEND_URL for each visitor's policy.
+	mode: hosted(),
+	scripts: [
+		posthog({
+			id: 'phc_your_project_key',
+			initOptions: { cookieless_mode: 'never' },
+			loadMode: 'after-consent',
+		}),
+	],
+};
 
 export const Consent = ({ children }: { children: ReactNode }) => (
-	<ConsentProvider options={{ mode, scripts }}>
+	<ConsentProvider options={options}>
 		{children}
 		<ConsentBanner />
 		<ConsentDialog />

package/docs/frameworks/react/content-security-policy.md

@@ -10,14 +10,16 @@ group: frameworks
 
 A React app with c15t adds these to the page, and your policy must allow them:
 
-| What                                                                                          | Directive                                             |
-| --------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
-| The `<style>` elements the banner, dialog and other stock components render with c15t's rules | `style-src` with a nonce                              |
-| `c15t/react/styles.css`, only if you import it with `styles: false`                           | `style-src 'self'`                                    |
-| The `<style id="c15t-theme">` element, if you render `ConsentTheme`                           | `style-src` with a nonce or its hash                  |
-| `<script>` elements the script loader creates for `scripts` entries, both `src` and inline    | `script-src` with each vendor's host, or a nonce      |
-| Browser requests to your backend's `/init` and `/subjects`                                    | `connect-src` with the backend origin                 |
-| Iframes inside `ConsentGate`, and the frames, images and requests your vendors load           | `frame-src`, `img-src`, `connect-src` for each vendor |
+| What                                                                                                            | Directive                                             |
+| --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| The `<style>` elements the banner, dialog and other stock components render with c15t's rules                   | `style-src` with a nonce                              |
+| `c15t/react/styles.css`, only if you import it with `styles: false`                                             | `style-src 'self'`                                    |
+| The `<style id="c15t-theme">` element, if you render `ConsentTheme`                                             | `style-src` with a nonce or its hash                  |
+| `<script>` elements the script loader creates for `scripts` entries, both `src` and inline                      | `script-src` with each vendor's host, or a nonce      |
+| The inline `<script>` that `consentManifest()` adds to `index.html` to send `/init` early                       | `script-src` with a nonce or its hash                 |
+| With server rendering, the inline `<script>` before the banner's buttons that holds a tap made before hydration | `script-src` with a nonce or its hash                 |
+| Browser requests to your backend's `/init` and `/subjects`                                                      | `connect-src` with the backend origin                 |
+| Iframes inside `ConsentGate`, and the frames, images and requests your vendors load                             | `frame-src`, `img-src`, `connect-src` for each vendor |
 
 In a client-rendered app, c15t components set their inline styles through
 React. A policy does not restrict styles set that way, so they need no
@@ -25,8 +27,10 @@ directive.
 
 ## Allow the consent backend
 
-With `hosted({ url })`, the browser calls `GET {url}/init` on every page load
-and `POST {url}/subjects` when the visitor accepts, rejects or saves. Add the
+With `hosted()`, the browser calls `GET {url}/init` on every page load
+and `POST {url}/subjects` when the visitor accepts, rejects or saves. With
+`manifest()`, it calls `POST {url}/subjects`, and `GET {url}/init` only when
+the policy needs a location the browser does not know. Add the
 backend's origin to `connect-src`:
 
 ```txt title="Content-Security-Policy (partial)"
@@ -67,8 +71,9 @@ entry takes precedence for that element. The stock components put it on the
 With Vite, set `html.cspNonce` to a placeholder in `vite.config.ts`, and have
 your server replace it with a new nonce on every response. Vite then adds
 `<meta property="csp-nonce" nonce="...">` to the page, and the browser keeps the
-value in the tag's `nonce` property. Read it where you create the provider, in
-the quickstart's `src/consent.tsx`:
+value in the tag's `nonce` property. Vite also stamps the nonce on the early
+`/init` script. Read it where you create the provider, in the
+quickstart's `src/consent.tsx`:
 
 ```tsx title="src/consent.tsx (partial)"
 const nonce =
@@ -85,6 +90,10 @@ The provider reads `options.nonce` once, when it mounts. A server-rendered
 React app, such as one built with React Router framework mode, reads the nonce
 from its own request and passes it the same way.
 
+On a static host, allow the early `/init` script by the hash in the browser's
+`Refused to execute inline script` error. If the policy blocks it, the app
+sends `/init` itself.
+
 ## Allow c15t's style elements
 
 The banner, dialog and other stock components render c15t's rules as

package/docs/frameworks/react/hooks.md

@@ -65,6 +65,6 @@ Use focused hooks for feature gates. For a complete custom prompt or preference
 center, use `useHeadlessConsentUI()` for surface actions and `useConsentDraft()`
 for staged choices, inside one `ConsentDraftProvider` so the save commits the
 same draft. v3 has no `useConsentManager()`; the
-[upgrade guide](../../upgrade-v3.md#replace-useconsentmanager) maps each of its
-fields to a hook. Read [how consent works](../../concepts/how-consent-works.md#a-permission-is-not-a-recorded-choice) before
+[`use-consent-manager-to-hooks` codemod](https://c15t.com/docs/cli/commands/codemods#migrate-useconsentmanager-to-v3-hooks)
+rewrites most of its calls to hooks. Read [how consent works](../../concepts/how-consent-works.md#a-permission-is-not-a-recorded-choice) before
 treating a callback as evidence of a choice.