@c15t/react 3.1.0-canary.0 → 3.2.0-canary.0

package/docs/customization/tailwind.md

@@ -31,7 +31,7 @@ fixture. The Next.js 15 and webpack fixtures use the same files. The check
 confirms that c15t's banner and dialog keep their styles under Tailwind's
 preflight, that a padding utility on the banner root
 beats c15t's own padding, and that the `dark:` variant applies. The fixtures run
-without a backend, so they use `offline()` mode or a local `backendURL`. Keep the
+without a backend, so they use `local()` mode or a local `backendURL`. Keep the
 `mode` or `backendURL` from your quickstart.
 
 ## Set up Tailwind CSS 4
@@ -165,13 +165,13 @@ when it opens, so the CSS entry holds only Tailwind. Add
 import svelte from '@astrojs/svelte';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'astro/config';
-import c15t, { offline } from 'c15t/astro';
+import c15t, { local } from 'c15t/astro';
 
 export default defineConfig({
 	integrations: [
 		svelte(),
 		c15t({
-			mode: offline({
+			mode: local({
 				policyRules: [
 					{
 						id: 'tailwind-matrix',
@@ -264,11 +264,10 @@ detects Tailwind 3 and links `c15t/astro/styles.css` itself. Every c15t
 package that ships a stylesheet exports the plugin as
 `<package>/postcss-tailwind3`, so use the one from the package you installed:
 
-| You installed                                             | Plugin name                       |
-| --------------------------------------------------------- | --------------------------------- |
-| `c15t` (React, Next.js, TanStack Start, Vue, Nuxt, Astro) | `c15t/postcss-tailwind3`          |
-| `@c15t/svelte` (Svelte, SvelteKit)                        | `@c15t/svelte/postcss-tailwind3`  |
-| `@c15t/browser` (script tag in the light DOM)             | `@c15t/browser/postcss-tailwind3` |
+| You installed                                                                | Plugin name                       |
+| ---------------------------------------------------------------------------- | --------------------------------- |
+| `c15t` (React, Next.js, TanStack Start, Vue, Nuxt, Astro, Svelte, SvelteKit) | `c15t/postcss-tailwind3`          |
+| `@c15t/browser` (script tag in the light DOM)                                | `@c15t/browser/postcss-tailwind3` |
 
 They are the same plugin. A config that already lists
 `@c15t/ui/postcss-tailwind3` keeps working.
@@ -303,17 +302,9 @@ class. Add the important modifier to utilities you pass to c15t parts:
 `!bg-red-500`, `hover:!bg-red-500`. A bare `bg-red-500` has no effect. Theme
 tokens work the same on Tailwind 3 and 4.
 
-In React and Next.js apps, `c15t setup` adds the plugin and the stylesheet
-import when it finds Tailwind 3, but does not set `styles: false`. Add that
-yourself. It replaces an existing
-`styles.tw3.css` import from an earlier setup with `styles.css`. When it
-cannot edit your PostCSS config, it prints the step to do by hand. See
-[setup](https://c15t.com/docs/cli/commands/setup#set-up-styles-and-tailwind-css).
-
 Create React App ignores PostCSS config files, so Tailwind 3 cannot run the
-plugin and the build fails on c15t's stylesheet. `c15t setup` warns
-about this. Add the plugin before `tailwindcss` through CRACO, eject, or move
-the app to Vite.
+plugin and the build fails on c15t's stylesheet. Add the plugin before
+`tailwindcss` through CRACO, eject, or move the app to Vite.
 
 **Next.js**
 
@@ -521,11 +512,7 @@ stylesheet:
 
 ```js title="postcss.config.mjs"
 export default {
-	plugins: {
-		'@c15t/svelte/postcss-tailwind3': {},
-		tailwindcss: {},
-		autoprefixer: {},
-	},
+	plugins: { 'c15t/postcss-tailwind3': {}, tailwindcss: {}, autoprefixer: {} },
 };
 ```
 
@@ -540,13 +527,13 @@ export default {
 } satisfies Config;
 ```
 
-Import `@c15t/svelte/styles.css` above the directives, import this
+Import `c15t/svelte/styles.css` above the directives, import this
 stylesheet from `src/main.ts`, and pass `styles={false}` to
 `ConsentProvider`:
 
 ```css title="src/app.css"
 /* Vite ignores an @import below other rules, so it goes first. */
-@import '@c15t/svelte/styles.css';
+@import 'c15t/svelte/styles.css';
 
 @tailwind base;
 @tailwind components;
@@ -557,11 +544,7 @@ stylesheet from `src/main.ts`, and pass `styles={false}` to
 
 ```js title="postcss.config.mjs"
 export default {
-	plugins: {
-		'@c15t/svelte/postcss-tailwind3': {},
-		tailwindcss: {},
-		autoprefixer: {},
-	},
+	plugins: { 'c15t/postcss-tailwind3': {}, tailwindcss: {}, autoprefixer: {} },
 };
 ```
 
@@ -576,13 +559,13 @@ export default {
 } satisfies Config;
 ```
 
-Import `@c15t/svelte/styles.css` above the directives, import this
+Import `c15t/svelte/styles.css` above the directives, import this
 stylesheet from your root `+layout.svelte`, and pass `styles={false}` to
 `ConsentRoot`:
 
 ```css title="src/app.css"
 /* Vite ignores an @import below other rules, so it goes first. */
-@import '@c15t/svelte/styles.css';
+@import 'c15t/svelte/styles.css';
 
 @tailwind base;
 @tailwind components;
@@ -792,7 +775,7 @@ stylesheet, and the layer order keeps it above preflight:
 
 ```html title="light-dom.html"
 <script
-	src="/c15t.offline.js"
+	src="/c15t.local.js"
 	data-mode="offline"
 	data-country="DE"
 	data-shadow="false"
@@ -814,7 +797,7 @@ instead:
 	window.c15t = [['config', { ui: { shadow: false, styles: false } }]];
 </script>
 <script
-	src="/c15t.offline.js"
+	src="/c15t.local.js"
 	data-mode="offline"
 	data-country="DE"
 	defer

package/docs/customization/translations.md

@@ -35,7 +35,7 @@ Nuxt module have no `i18n` option; their copy comes from the backend.
 
 c15t bundles English. Every other language it ships is a separate entry point
 in `@c15t/translations`, named by its language code. Importing one registers
-c15t's built-in copy for that language. Offline mode can then switch to it,
+c15t's built-in copy for that language. Local mode can then switch to it,
 and your messages that repeat its wording don't hide backend edits. Import
 them in the file that configures the provider, so they load in the browser:
 
@@ -51,9 +51,11 @@ string or build your messages from it:
 import { translations as de } from '@c15t/translations/de';
 ```
 
-The entries are `bg`, `cs`, `cy`, `da`, `de`, `el`, `es`, `et`, `fi`, `fr`,
-`ga`, `gu`, `he`, `hi`, `hr`, `hu`, `id`, `is`, `it`, `lb`, `lt`, `lv`, `mt`,
-`nb`, `nl`, `nn`, `pl`, `pt`, `rm`, `ro`, `sk`, `sl`, `sv` and `zh`.
+The entries are `ar`, `bg`, `bn`, `cs`, `cy`, `da`, `de`, `el`, `es`, `et`,
+`fi`, `fr`, `ga`, `gu`, `he`, `hi`, `hr`, `ht`, `hu`, `id`, `is`, `it`, `ja`,
+`kn`, `ko`, `lb`, `lt`, `lv`, `ml`, `mr`, `ms`, `mt`, `nb`, `nl`, `nn`, `pa`,
+`pl`, `pt`, `rm`, `ro`, `ru`, `sk`, `sl`, `sv`, `ta`, `te`, `th`, `tr`, `ur`,
+`vi`, `yi` and `zh`.
 `@c15t/translations/all` still loads every language at once. The `c15t`
 package doesn't re-export these entries, so add `@c15t/translations` to your
 dependencies.
@@ -102,26 +104,30 @@ production. Rename the section to `consentGate` to remove the warning.
 ## Show right-to-left languages
 
 c15t sets `dir="rtl"` on its surfaces when the resolved language is Arabic,
-Hebrew, Persian, Urdu, Pashto, Sindhi, Kurdish or Dhivehi. It matches the
-primary language, so `ar-EG` counts as Arabic. Hebrew is the only
-right-to-left translation c15t ships. For the others, supply your own
-messages or the copy from your Inth project.
+Hebrew, Yiddish, Persian, Urdu, Pashto, Sindhi, Central Kurdish (`ckb`),
+Uyghur, Dhivehi, Syriac or N'Ko. It matches the primary language, so `ar-EG`
+counts as Arabic, and accepts the older codes `iw` and `ji`. A script subtag
+decides over the language: `ku-Arab` and `pa-Arab` are right to left, and
+`sd-Deva` is left to right. Plain `ku` is left to right because it usually
+means Kurmanji, which uses Latin script. c15t ships right-to-left
+translations for Arabic, Hebrew, Urdu and Yiddish. For the others, supply
+your own messages or the copy from your Inth project.
 
 What follows the direction:
 
 * Text, headings and the button row in the banner, the preference dialog and
   the preference widget flow right to left.
-* A floating or widget banner in its default corner moves to the mirrored
-  corner, so `bottom-left` becomes `bottom-right`. A `position` you set
-  yourself stays where you put it.
 * The HTML script tag, `@c15t/browser` and Astro's banner also set `lang` on
   their surfaces. React, Vue and Svelte set `dir` only, so set `lang` on
   `<html>` yourself.
 
+The banner and the floating `ConsentDialogTrigger` stay in their corners. A
+`bottom-left` banner is still at the bottom left in Hebrew, so it doesn't
+jump across the page when the visitor's language changes.
+
 What does not follow yet:
 
 * The IAB TCF dialog aligns several labels, indents and borders to the left.
-* The floating `ConsentDialogTrigger` keeps the corner you give it.
 
 Test right-to-left pages with a real translation before you ship them.
 

package/docs/frameworks/react/clear-on-revocation.md

@@ -62,8 +62,9 @@ replaces the automatic attempts for that field. Partitioned cookies need
 `partitioned: true`. A prefix only finds cookies the current page can read,
 so use an exact name for a cookie on another path.
 
-c15t never deletes its own consent records, even when a pattern matches
-them.
+c15t never deletes its own consent records or the `c15t-sid` subject ID
+cookie, even when a pattern matches them. The subject ID stays so an
+opt-out can still reach what was kept under it.
 
 ## When cleanup runs
 

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

@@ -63,7 +63,7 @@ rule with `model: 'none'` owes no rights, so nothing renders unless you add
 failed, no rule matched and you set no default, or init is still withheld, no
 consent surface renders: not the banner, the dialog, the widget, the
 preferences link, or the trigger. They appear as soon as a rule resolves,
-without a remount. `offline()` without `policyRules` resolves the recommended
+without a remount. `local()` without `policyRules` resolves the recommended
 pack, so it shows the strict opt-in banner until you pass a country.
 
 Acknowledging a notice records its dismissal. It does not record consent or
@@ -201,8 +201,8 @@ Each variant accepts its own positions:
 | `widget`   | `bottom-left`, `bottom-right`, `top-left`, `top-right`                                | `bottom-right` |
 | `wall`     | `center`                                                                              | `center`       |
 
-A default corner mirrors left and right for right-to-left languages. A
-position you set is never mirrored. A position that is not valid for the
+Right-to-left languages keep the same position; only the text direction
+changes. A position that is not valid for the
 variant falls back to the default and logs an `invalid-position` diagnostic
 in development.
 

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

@@ -68,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()` 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                                                                                                                                                               |
+| Option                        | Purpose                                                                                                                                                                                                                       |
+| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mode`                        | Required. `hosted()` for the backend's `/init`, `manifest()` for a bundled policy, `local()` 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/gpp.md

@@ -36,7 +36,7 @@ The props are the GPP options listed below, for example
 pass to `ConsentProvider` as `runtime`.
 
 The GPP string follows the policy and location your backend resolves for the
-visitor, so a US visitor's state comes from the backend. With `offline()`
+visitor, so a US visitor's state comes from the backend. With `local()`
 mode, pass the state yourself, for example
 `overrides: { country: 'US', region: 'CA' }`.
 

package/docs/frameworks/react/headless.md

@@ -1,7 +1,7 @@
 ---
 title: Headless
-description: Build a custom consent banner in React with the c15t/react/headless
-  hooks inside your ConsentProvider.
+description: Build a custom consent banner or embed gate in React with the
+  c15t/react/headless hooks inside your ConsentProvider.
 group: frameworks
 ---
 
@@ -30,29 +30,28 @@ The headless hooks read the runtime from the nearest `ConsentProvider` from
 banner, and keep the dialog and persistent preferences control.
 
 ```tsx title="src/consent-banner.tsx"
-import { useHeadlessConsentUI, useTranslations } from 'c15t/react/headless';
-
-const ACTION_LABELS = {
-	accept: 'acceptAll',
-	customize: 'customize',
-	dismiss: 'acknowledge',
-	reject: 'rejectAll',
-	save: 'save',
-} as const;
+import {
+	useBannerCopy,
+	useConsentLabels,
+	useHeadlessConsentUI,
+} from 'c15t/react/headless';
 
 export const Banner = () => {
 	const { banner, performAction, openDialog } = useHeadlessConsentUI();
-	const { common, rights } = useTranslations();
+	const { title, description } = useBannerCopy();
+	const labels = useConsentLabels();
 
 	if (!banner.isVisible) {
 		return null;
 	}
 
 	return (
-		<section aria-label="Privacy">
+		<section aria-label={title}>
+			<h2>{title}</h2>
+			<p>{description}</p>
 			{banner.preferenceControls.map((right) => (
 				<button key={right} type="button" onClick={openDialog}>
-					{right === 'opt-out' ? rights?.optOut : rights?.preferences}
+					{labels.preferenceControls[right]}
 				</button>
 			))}
 			{banner.actionGroups.map((group) => (
@@ -64,7 +63,7 @@ export const Banner = () => {
 							data-primary={banner.primaryActions.includes(action) || undefined}
 							onClick={() => performAction(action)}
 						>
-							{common[ACTION_LABELS[action]]}
+							{labels.actions[action]}
 						</button>
 					))}
 				</div>
@@ -76,8 +75,10 @@ export const Banner = () => {
 
 `banner.actionGroups` is the resolved layout: reject and accept share a group
 at equal prominence, and the rest follow. `banner.orderedActions` is the same
-list flattened. Under a notice the only action is `dismiss`, and
-`banner.preferenceControls` recommends additional buttons for opening
+list flattened. `banner.primaryActions` lists the actions to style as
+primary. Under a notice the only action is `dismiss`, and
+`banner.primaryActions` contains it. `banner.preferenceControls` recommends
+additional buttons for opening
 preferences. Under a notice it contains `opt-out`, which selects the
 "Do not sell or share my data" label. The example renders that button and
 an "OK" button. Both controls keep their own command: opening
@@ -86,6 +87,20 @@ preferences and dismissing the notice.
 The list is a rendering helper. It does not establish that your UI implements
 all policy rights. Provide disclosure and persistent preferences access.
 
+`useBannerCopy()` returns the `title` and `description` for the active
+prompt. A notice reads `cookieBanner.noticeTitle` and
+`cookieBanner.noticeDescription`, then falls back to the choice copy in the
+same language before English. `useConsentLabels()` returns
+`actions`, a label for each action, and `preferenceControls`, a label for
+each preference control. `dismiss` reads `common.acknowledge`, then
+`common.dismiss`. Both hooks follow the active language and fill missing
+keys from English, and they are the same strings the pre-built banner
+renders.
+
+The hooks wrap `resolvePromptCopy`, `resolveActionLabels`, and
+`resolvePreferenceControlLabels`. Those take a translations object and
+are exported from `c15t`, so code outside React can produce the same copy.
+
 `performAction` saves all categories for `accept`, none for `reject`, the
 current draft for `save`, records a dismissal for `dismiss`, and opens the
 preference center for `customize`. `banner.diagnostics` reports when a host
@@ -94,5 +109,117 @@ prominence. Review each diagnostic when configuring custom presentation.
 
 `banner.variant`, `banner.position`, and `banner.blocking` carry the resolved
 shape from `presentation.prompt`, so a headless surface can follow the same
-bar, widget, or wall choice the pre-built banner would make, and can trap
-focus and lock scroll exactly when `blocking` is true.
+bar, widget, or wall choice the pre-built banner would make. The pre-built
+banner traps focus and locks page scroll while `blocking` is true. To do
+the same, call `useFocusTrap(blocking, ref)` and `useScrollLock(blocking)`
+from the headless entry, with `blocking` set to
+`banner.isVisible && banner.blocking` and `ref` attached to your banner's
+root element. Scroll locks are counted, so the page scrolls again once the
+banner and any open dialog have both let go.
+
+c15t can show consent copy in the visitor's browser language, which may run
+right to left on a left-to-right page. `useConsentTextDirection()` returns
+`'rtl'` or `'ltr'` for the language the copy is in. Set it as `dir` on your
+banner and preference center roots, as the pre-built ones do.
+
+The pre-built banner and dialog render nothing under the IAB model, and
+the TCF surfaces inside `<IABProvider>` take over. A
+custom surface that handles only opt-in and opt-out should do the same:
+return `null` when `useModel()` is `'iab'`. Call `useIABPolicyGuard()` in
+it as well. It throws `IABUnavailableError` while rendering when the
+policy needs IAB and the app never loaded `<IABProvider>`, so the gap
+shows up in your error boundary instead of as a missing banner.
+
+## Build a custom consent gate
+
+`useConsentGate(category)` tells a custom gate what to render for one
+consent category, with translated copy and an action that opens the
+preference center. Use it when the stock `ConsentGate` placeholder does not
+fit your design, for example a design system card in front of a video or
+map embed. `ConsentGate` runs on the same hook, so both gates follow the
+same rules.
+
+This gate renders its children once `marketing` is granted and the page has
+hydrated, the policy message when the policy blocks `marketing`, and
+otherwise a placeholder with a button that opens the preference center:
+
+```tsx title="src/video-gate.tsx"
+import { useConsentGate } from 'c15t/react/headless';
+import type { ReactNode } from 'react';
+
+export const VideoGate = ({ children }: { children: ReactNode }) => {
+	const { state, title, actionLabel, policyBlockedMessage, requestConsent } =
+		useConsentGate('marketing');
+
+	if (state === 'granted') {
+		return children;
+	}
+	if (state === 'pending') {
+		return null;
+	}
+	if (state === 'policy-blocked') {
+		return <p>{policyBlockedMessage}</p>;
+	}
+	return (
+		<div>
+			<p>{title}</p>
+			<button type="button" onClick={requestConsent}>
+				{actionLabel}
+			</button>
+		</div>
+	);
+};
+```
+
+Render `VideoGate` inside your `ConsentProvider` around the embed, such as a
+YouTube `iframe`.
+
+| Field                  | Type                    | Description                                                                                                            |
+| ---------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `state`                | `ConsentGateState`      | `'granted'`, `'pending'`, `'denied'` or `'policy-blocked'`.                                                            |
+| `categoryTitle`        | `string`                | `consentTypes.<category>.title` from your translations, or the category name when they have none.                      |
+| `title`                | `string` or `undefined` | `consentGate.title`, `Accept {category} consent to view this content.`, with `{category}` replaced by `categoryTitle`. |
+| `actionLabel`          | `string` or `undefined` | `consentGate.actionButton`, `Enable {category} consent`, with `{category}` replaced by `categoryTitle`.                |
+| `policyBlockedMessage` | `string`                | `consentGate.policyBlocked`, or the English message when your translations have none.                                  |
+| `requestConsent`       | `() => void`            | Opens the preference center.                                                                                           |
+
+The result type is exported as `UseConsentGateResult` and the state type as
+`ConsentGateState`. Render from `state`:
+
+* `'granted'`: the effective permission for the category is granted and
+  the page has hydrated. Render the content.
+* `'pending'`: permission is granted but the page has not hydrated yet.
+  Render nothing.
+* `'denied'`: permission is not granted. Render a placeholder with a
+  button that calls `requestConsent`.
+* `'policy-blocked'`: the policy has `scopeMode: 'strict'` and its scope
+  leaves the category out, so the visitor cannot grant it. Render
+  `policyBlockedMessage` without a button. `necessary` is never blocked.
+
+Permission is the value `useConsent(category)` returns. An opt-out policy
+can grant it before the visitor chooses, and a privacy signal such as GPC
+can withdraw a stored grant.
+
+Granted content never appears in the server HTML. When the server snapshot
+grants the category, `state` is `'pending'` in the server HTML and during
+hydration, then turns `'granted'`, so an iframe inside a streamed
+`Suspense` boundary loads once. Server rendering and hydration evaluate the
+snapshot at its own evaluation time and never read the clock, so the gate
+works in a statically prerendered page.
+
+`requestConsent` does not grant the category, because the visitor still has
+to save. The preference center opens on its usual view, not on the
+category. Mount a `ConsentDialog` in the same provider so it has something
+to open. The stock gate button starts loading the pre-built dialog's code
+on hover, focus and idle time. `requestConsent` doesn't, so without a
+banner or dialog trigger on the page, the first open waits for that
+download.
+
+When it mounts, the hook registers the category with the provider, as
+`ConsentGate` does, so the preference center can list it. If you set
+`options.consentCategories` on the provider, list the category there too,
+so the preference center shows it before a gate mounts, including on pages
+without one.
+
+The hook renders no wrapper element. Reserve the embed's space in your own
+markup so the page does not shift when the placeholder is replaced.

package/docs/frameworks/react/iab.md

@@ -274,7 +274,7 @@ The backend's `additionalConsent` option sets the cache, which defaults to the
 
 ### List the providers in the browser
 
-Offline mode has no backend, and some backends do not list providers. In
+Local mode has no backend, and some backends do not list providers. In
 those setups, pass `additionalConsent` with your other IAB options: the
 `IABProvider` props in React, Next.js and TanStack Start, the `createIAB`
 options in JavaScript, and the `iab` option of the Vue, Nuxt, Svelte, Astro
@@ -380,6 +380,13 @@ its own CMP ID. It lists the CMPs it has certified on its
 Ask Google to list your CMP ID through its CMP intake form before you rely on
 the AC string in production.
 
+## c15t's IAB CMP registration
+
+Inth makes c15t. Inth's legal entity, Consent Management Inc., is registered
+with IAB Europe as a CMP under CMP ID 490. The
+[IAB Europe CMP list](https://iabeurope.eu/cmp-list/) shows it under the name
+Consent Management Inc.
+
 ## How the preference centre shows features
 
 The stock IAB preference centres in React, Next.js, Vue, Svelte, Astro and the

package/docs/frameworks/react/quickstart.md

@@ -25,7 +25,7 @@ You need an [Inth](https://inth.com) project. In the project, set the policy
 rules for your regions, add your site's origin to the trusted origins, and copy
 the backend URL.
 [Choose your setup](../../concepts/choose-your-setup.md#decide-who-runs-the-consent-backend)
-covers self-hosting and offline mode.
+covers self-hosting and local mode.
 
 The guide uses `hosted()` mode. Policy, translation and vendor edits in your
 project reach visitors on their next page load, without a rebuild.

package/docs/frameworks/react/rendering.md

@@ -54,7 +54,7 @@ usually shows 50 to 250 ms sooner. There is nothing to configure.
 
 The early request can't read your app's options, so in a few setups it won't
 match and the app sends a second `/init`. Pass `initPrefetch: false` when the
-app uses `offline()` or gives `hosted()` its own `backendURL`, `fetch`,
+app uses `local()` or gives `hosted()` its own `backendURL`, `fetch`,
 `initURL` or `headers`. With its own `fetch`, `hosted()` sends `/init` through
 it and ignores the early response. If it sets `credentials`, `overrides`, `storageKey`, an
 `experiment`, or `journey: false`, pass the same values as

package/docs/frameworks/react/scripts.md

@@ -102,6 +102,50 @@ their vendor slug. See [vendor consent](./vendor-consent.md).
 To send your own events only to allowed integrations, see
 [send events only to allowed integrations](../../integrations/overview.md#send-events-only-to-allowed-integrations).
 
+## Send your own analytics events
+
+`useEventDispatcher()` returns the provider's event dispatcher. It sends to the
+`scripts` you registered and checks consent when an event goes out. Call
+`pageview` from your router with the current path:
+
+```tsx title="src/analytics-events.tsx"
+import { useEventDispatcher } from 'c15t/react';
+import { useEffect } from 'react';
+
+/**
+ * Sends a PostHog pageview for each new path. Call it once, inside
+ * `ConsentProvider`, with your router's current path, such as
+ * `useLocation().pathname` from React Router.
+ */
+export const usePageviews = (path: string) => {
+	const events = useEventDispatcher({ pageviews: ['posthog'] });
+	useEffect(() => {
+		events.pageview(path);
+	}, [events, path]);
+};
+
+export const SearchButton = ({ resultCount }: { resultCount: number }) => {
+	const events = useEventDispatcher();
+	return (
+		<button
+			type="button"
+			onClick={() => {
+				events.track('search', { resultCount });
+			}}
+		>
+			Search
+		</button>
+	);
+};
+```
+
+`track` sends to every registered script with an event API and drops the
+event while measurement is denied. `pageview` sends only to the integrations
+named in `pageviews`, and the first call records the path without sending.
+Every dispatcher shares one pageview history for the provider's lifetime.
+See [send events only to allowed integrations](../../integrations/overview.md#send-events-only-to-allowed-integrations)
+for the supported vendors.
+
 ## Check the scripts
 
 Open DevTools Network in a private window, filter by each vendor's domain and