@c15t/scripts 3.0.0-alpha.0 → 3.0.0-alpha.2

package/dist-types/vendors/analytics/one-dollar-stats.d.ts

@@ -0,0 +1,39 @@
+import type { Script } from '@c15t/core';
+/** The classic script from OneDollarStats' installation instructions. */
+export declare const ONE_DOLLAR_STATS_SCRIPT_SRC = "https://assets.onedollarstats.com/stonks.js";
+/** OneDollarStats is loaded only after measurement consent is granted. */
+export declare const oneDollarStatsManifest: {
+    readonly kind: "c15t.vendor-manifest";
+    readonly schemaVersion: 1;
+    readonly category: 'measurement';
+    readonly install: [{
+        readonly defer: true;
+        readonly src: "https://assets.onedollarstats.com/stonks.js";
+        readonly type: 'loadScript';
+    }];
+    readonly vendor: 'one-dollar-stats';
+};
+export interface OneDollarStatsOptions {
+    /**
+     * Bare hostname, such as `docs.example.com`. Overrides the event hostname
+     * on every host, including production. Required for local dev mode.
+     */
+    hostname?: string;
+    /**
+     * Tracker settings forwarded as `data-*` attributes. Use string values,
+     * e.g. `devmode: 'true'`, `autocollect: 'false'`, or a custom `url`.
+     * Setting `'hash-routing': 'false'` omits the presence-based attribute.
+     */
+    [setting: string]: string | undefined;
+}
+/**
+ * Creates a consent-gated OneDollarStats script. No API key is required.
+ * The tracker reads data attributes from `document.currentScript` and
+ * handles client-side navigation itself.
+ *
+ * @param options - Tracker settings without the `data-` prefix.
+ * @returns The OneDollarStats script configuration.
+ * @throws {Error} When hostname is not a bare host, or a setting name is not
+ * a valid attribute name or its value is not a string.
+ */
+export declare const oneDollarStats: (options?: OneDollarStatsOptions) => Script;

package/dist-types/vendors/analytics/segment.d.ts

@@ -131,6 +131,10 @@ export declare const segmentManifest: {
     }];
     readonly category: 'measurement';
     readonly install: [{
+        readonly path: ["analytics", "_loadOptions"];
+        readonly type: 'setGlobalPath';
+        readonly value: '{{loadOptions}}';
+    }, {
         readonly global: 'analytics';
         readonly method: 'page';
         readonly type: 'callGlobal';
@@ -142,6 +146,8 @@ export declare const segmentManifest: {
     readonly vendor: 'segment';
 };
 export interface SegmentOptions {
+    /** Options consumed by Analytics.js on initialization. */
+    loadOptions?: Record<string, unknown>;
     /** Your Segment write key. */
     writeKey: string;
     /** Queue the initial `analytics.page()` call during setup. */
@@ -155,4 +161,4 @@ export interface SegmentOptions {
  * @param options - The options for the Segment script.
  * @returns The Segment script configuration.
  */
-export declare const segment: ({ writeKey, trackPageView, scriptUrl, }: SegmentOptions) => Script;
+export declare const segment: ({ writeKey, loadOptions, trackPageView, scriptUrl, }: SegmentOptions) => Script;

package/dist-types/vendors/functional/front-chat.d.ts

@@ -0,0 +1,62 @@
+import type { Script } from '@c15t/core';
+declare global {
+    interface Window {
+        FrontChat?: (command: string, options?: Record<string, unknown>) => unknown;
+    }
+}
+/** Front Chat loader and consent-gated widget initialisation. */
+export declare const frontChatManifest: {
+    readonly kind: "c15t.vendor-manifest";
+    readonly schemaVersion: 1;
+    readonly category: 'functionality';
+    readonly install: [{
+        readonly async: true;
+        readonly src: '{{scriptSrc}}';
+        readonly type: 'loadScript';
+    }];
+    readonly onLoadGranted: [{
+        readonly args: ["init", "{{initOptions}}"];
+        readonly global: 'FrontChat';
+        readonly type: 'callGlobal';
+    }];
+    readonly vendor: 'front-chat';
+};
+export interface FrontChatOptions {
+    /** Public chat ID from the Front channel's installation snippet. */
+    chatId: string;
+    /** Show Front's default launcher. @default true */
+    useDefaultLauncher?: boolean;
+    /** Custom or proxied Front Chat bundle URL. */
+    scriptSrc?: string;
+    /** CSP nonce forwarded to the loader and Front's generated scripts. */
+    nonce?: string;
+}
+/**
+ * Creates a Front Chat script gated on functionality consent.
+ *
+ * Keep c15t's default reload-on-revocation behaviour enabled to stop an
+ * already-running widget. Removing its loader cannot unload the SDK.
+ *
+ * @param options - Front channel and launcher configuration.
+ * @returns The Front Chat script configuration.
+ * @throws {Error} When chatId is missing or empty. Copy the public ID from
+ * the Front channel's installation snippet.
+ * @example
+ * frontChat({ chatId: 'YOUR_FRONT_CHAT_ID' });
+ * @see https://help.front.com/en/articles/2049
+ */
+export declare const frontChat: (options: FrontChatOptions) => Script;
+/**
+ * Requests widget removal and session cleanup through Front's SDK.
+ *
+ * Optionally call it from `onBeforeConsentRevocationReload`. Front does not
+ * provide a completion promise, so this does not guarantee cleanup before
+ * navigation.
+ * Safe to call during SSR or before the SDK loads.
+ *
+ * @returns Nothing.
+ * @example
+ * shutdownFrontChat();
+ * @see https://dev.frontapp.com/docs/chat-sdk-reference
+ */
+export declare const shutdownFrontChat: () => void;

package/dist-types/vendors/tag-managers/cloudflare-zaraz.d.ts

@@ -0,0 +1,39 @@
+import type { AllConsentNames, Script } from '@c15t/core';
+/** The Zaraz Consent API methods used by the bridge. */
+export interface ZarazConsentApi {
+    APIReady: boolean;
+    modal?: unknown;
+    getAll: () => Record<string, boolean>;
+    set: (permissions: Record<string, boolean>) => void;
+    sendQueuedEvents: () => void;
+}
+export interface CloudflareZarazOptions {
+    /** Map c15t categories to purpose IDs from the Zaraz dashboard. */
+    purposes: Partial<Record<AllConsentNames, readonly string[]>>;
+    /** Hide the currently visible Zaraz modal. Disable auto-display in Zaraz too. @default true */
+    hideBuiltInModal?: boolean;
+    /** Replay Zaraz's queued pageview events after a denied purpose becomes allowed. @default true */
+    sendQueuedEvents?: boolean;
+    /**
+     * Called once after the first successful synchronization. With automatic
+     * pageviews disabled in Zaraz, send the initial Pageview from this callback.
+     */
+    onReady?: () => void;
+    /** Called when synchronization fails. Retried on the next consent update or readiness event. */
+    onError?: (error: unknown) => void;
+}
+/**
+ * Synchronize c15t effective permissions with externally loaded Zaraz tools.
+ * Does not load Zaraz or configure tools. Unmapped Zaraz purposes are denied.
+ * Disable automatic pageviews and send the first Pageview from onReady to avoid
+ * running tools with a stale Zaraz consent cookie before synchronization.
+ *
+ * @param options - Purpose mapping and synchronization callbacks.
+ * @returns A callback-only script for the existing c15t script loader.
+ * @throws {Error} If the mapping is empty, contains blank IDs, or maps an ID twice.
+ * @example
+ * ```ts
+ * cloudflareZaraz({ purposes: { measurement: ['analytics-purpose'] } });
+ * ```
+ */
+export declare const cloudflareZaraz: (options: CloudflareZarazOptions) => Script;

package/dist-types/vendors/tag-managers/google-tag-manager.d.ts

@@ -54,6 +54,8 @@ export declare const googleTagManagerManifest: {
     readonly vendor: 'google-tag-manager';
 };
 export interface GoogleTagManagerOptions {
+    /** Container queue name. Defaults to dataLayer. */
+    dataLayer?: string;
     /**
      * Your Google Tag Manager container ID. Begins with 'GTM-'.
      * @example `GTM-1234XXX`
@@ -91,4 +93,4 @@ export interface GoogleTagManagerOptions {
  * @param options - The options for the Google Tag Manager script.
  * @returns The Google Tag Manager script.
  */
-export declare const googleTagManager: ({ id, updateEventName, consentMapping, }: GoogleTagManagerOptions) => Script;
+export declare const googleTagManager: ({ id, dataLayer, updateEventName, consentMapping, }: GoogleTagManagerOptions) => Script;

package/docs/README.md

@@ -30,6 +30,7 @@ These docs describe v3. Start with Inth hosted setup, identify the framework, ro
 - [Understand consent state](./guides/consent-state.md): Distinguish policy resolution, effective permissions, explicit choices, notices and privacy signals.
 - [Data fetching and transports](./guides/data-fetching.md): Choose cached manifests, backend init or offline policy resolution, and understand where consent records are saved.
 - [Choose a deployment mode](./guides/deployment-modes.md): Choose who runs your consent backend, then select manifest, init or offline resolution for your deployment.
+- [Share consent controls across frameworks](./guides/shared-consent-controls.md): Use the same c15t script lifecycle, external consent source, and event controls in every framework.
 - [Troubleshoot consent](./guides/troubleshooting.md): Diagnose missing banners, early vendor requests, lost choices and hydration differences.
 - [Verify consent before shipping](./guides/verify-consent.md): Test requests, policy resolution, persistence, navigation and preference changes in a production build.
 
@@ -47,14 +48,18 @@ These docs describe v3. Start with Inth hosted setup, identify the framework, ro
 - [Ahrefs Analytics](./integrations/ahrefs-analytics.md): Configure Ahrefs Analytics with c15t v3, understand measurement permission and verify loading and revocation.
 - [Amplitude](./integrations/amplitude.md): Configure Amplitude with c15t v3, understand measurement permission and verify loading and revocation.
 - [Custom integrations](./integrations/building-integrations.md): Define loading, initialization and consent-change behavior for a vendor without a helper.
+- [Clear on revocation](./integrations/clear-on-revocation.md): Remove configured first-party cookies and Web Storage keys when their consent category is denied.
 - [Clearbit](./integrations/clearbit.md): Configure Clearbit with c15t v3, understand marketing permission and verify loading and revocation.
 - [Cloudflare Web Analytics](./integrations/cloudflare-web-analytics.md): Configure Cloudflare Web Analytics with c15t v3, understand measurement permission and verify loading and revocation.
+- [Cloudflare Zaraz](./integrations/cloudflare-zaraz.md): Synchronize c15t permissions with Zaraz purposes while Cloudflare manages your tools.
 - [Crisp](./integrations/crisp.md): Configure Crisp with c15t v3, understand functionality permission and verify loading and revocation.
 - [Databuddy](./integrations/databuddy.md): Configure Databuddy's initial and updated consent state with c15t v3.
 - [Fathom Analytics](./integrations/fathom-analytics.md): Configure Fathom Analytics with c15t v3, understand measurement permission and verify loading and revocation.
+- [Front Chat](./integrations/front-chat.md): Load the Front Chat widget with functionality permission, forward CSP nonces and clear the session on revocation.
 - [Google Maps](./integrations/google-maps.md): Prevent a map iframe from mounting before the required permission.
 - [Google Tag](./integrations/google-tag.md): Configure gtag with c15t Consent Mode signals and understand its loading behavior.
 - [Google Tag Manager](./integrations/google-tag-manager.md): Load GTM with c15t consent signals and verify the tags inside your container.
+- [Granular consent](./integrations/granular-consent.md): Let visitors grant a category and still turn one vendor off, without adopting IAB TCF.
 - [Heap](./integrations/heap.md): Configure Heap with c15t v3, understand measurement permission and verify loading and revocation.
 - [Hightouch](./integrations/hightouch.md): Configure Hightouch with c15t v3, understand measurement permission and verify loading and revocation.
 - [Hotjar](./integrations/hotjar.md): Configure Hotjar with c15t v3, understand measurement permission and verify loading and revocation.
@@ -66,8 +71,10 @@ These docs describe v3. Start with Inth hosted setup, identify the framework, ro
 - [Microsoft Clarity](./integrations/microsoft-clarity.md): Configure Microsoft Clarity with c15t v3, understand measurement permission and verify loading and revocation.
 - [Microsoft UET](./integrations/microsoft-uet.md): Configure Microsoft UET with c15t v3, understand marketing permission and verify loading and revocation.
 - [Mixpanel](./integrations/mixpanel-analytics.md): Configure Mixpanel with c15t v3, understand measurement permission and verify loading and revocation.
+- [OneDollarStats](./integrations/one-dollar-stats.md): Load the OneDollarStats tracker with measurement permission, forward its settings and verify loading and revocation.
 - [OpenAI Pixel](./integrations/openai-pixel.md): Configure the OpenAI Measurement Pixel for ChatGPT Ads with c15t v3, manage marketing permission and verify conversion delivery.
 - [Overview](./integrations/overview.md): Find all c15t integrations for analytics, tag managers, advertising, chat and embedded content.
+- [Pinterest Tag](./integrations/pinterest-tag.md): Configure the Pinterest Tag with c15t v3, track typed events and verify marketing permission, revocation and reload.
 - [Pirsch](./integrations/pirsch.md): Configure Pirsch with c15t v3, understand measurement permission and verify loading and revocation.
 - [Plausible Analytics](./integrations/plausible-analytics.md): Configure Plausible Analytics with c15t v3, understand measurement permission and verify loading and revocation.
 - [PostHog](./integrations/posthog.md): Choose PostHog loading and cookieless behavior, configure the region, and synchronize v3 permissions.

package/docs/customization/overview.md

@@ -34,10 +34,11 @@ layout can be restored by the policy renderer.
 ## Use the adapter's configuration shape
 
 React and Next.js accept provider `theme`, `presentation` and `components`
-options. Vue and Nuxt expose their own shared configuration, including CSS
+options, and render theme tokens with `ConsentTheme` on the server. Vue and Nuxt expose their own shared configuration, including CSS
 `tokens` and component slots. Svelte accepts its provider options and theme
-contract. Astro serializes integration options and uses the selected adapter for
-dialogs. Do not move a configuration object between frameworks without checking
+slots; SvelteKit renders the token CSS from a server `load`. Astro serializes
+integration options, renders the theme tokens on the server and uses the
+selected adapter for dialogs. Do not move a configuration object between frameworks without checking
 the target types.
 
 Read [tokens and CSS](./tokens.md),

package/docs/customization/recipes.md

@@ -26,8 +26,10 @@ export const brandTheme = defineTheme({
 
 ```
 
-Install `@c15t/ui` to use `defineTheme` directly. Pass `brandTheme` as `theme` in
-your existing React or Next.js provider options. Keep your Inth mode and script
+Install `@c15t/ui` to use `defineTheme` directly. Render
+`<ConsentTheme theme={brandTheme} />` on the server for the tokens, and pass
+`brandTheme` as `theme` in your existing React or Next.js provider options for
+the action styles. Keep your Inth mode and script
 configuration. The theme source above is also imported by the runnable example,
 so the rendered result and the documentation use the same values.
 

package/docs/customization/tokens.md

@@ -11,10 +11,53 @@ React, Next.js and Svelte provide `styles.css`. Import the adapter's stylesheet
 at the app's global entry point. Vue includes styles in its components; Astro
 adds styles through its integration.
 
+The stylesheet blocks rendering, so it carries only what a first paint can
+show: the default tokens, every c15t CSS variable, and the rules for the
+banner, `ConsentDialogTrigger` and the `ConsentGate` placeholder. The consent
+dialog and preference widget bring their own rules. Each rule reaches the page
+once.
+
 ```tsx
 import 'c15t/react/styles.css';
 ```
 
+| File                             | Holds                                                                  | Loaded by                                                         |
+| -------------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------- |
+| `styles.css` or `styles.tw3.css` | Default tokens, all variables, banner, trigger and `ConsentGate` rules | Your app, once                                                    |
+| `@c15t/ui/styles/dialog.css`     | Dialog and preference widget rules                                     | The dialog component, with its lazy chunk                         |
+| `@c15t/ui/styles/primitives.css` | Rules for the `@c15t/ui/styles/primitives` class maps                  | Svelte's `styles.css`, or your app if it renders those class maps |
+| `iab/styles.css`                 | IAB TCF banner and dialog rules and variables                          | Your app, after `styles.css`                                      |
+
+In React, Next.js and TanStack Start, the dialog's module imports
+`@c15t/ui/styles/dialog.css`. The bundler emits it with the dialog's chunk and
+loads it before that chunk runs, so the dialog never renders unstyled. The
+chunk loads after first paint, by the time the dialog first opens. Do not
+import `dialog.css` yourself. The `@c15t/react/components/consent-dialog`,
+`/components/consent-widget`, `/primitives`, `/primitives/*` and `/iab` entry
+points import it as soon as you import them, because they render dialog parts
+outside the lazy chunk.
+
+These modules import the stylesheet through `@c15t/ui/styles/dialog`. Under
+the `node` export condition that module imports nothing, so server code that
+loads `@c15t/react` with plain Node, such as the Pages Router or an SSR build
+that keeps dependencies external, does not fail on the `.css` file. In your
+own components, import `@c15t/ui/styles/dialog` rather than the `.css` file
+if the module can run on the server.
+
+Svelte loads its dialog with the page, so `c15t/svelte/styles.css` also
+imports the dialog and primitive rules. Astro injects the banner rules; the
+React and Svelte dialog islands import the rest, and Astro links those
+stylesheets on every page, so in Astro the dialog rules still block rendering.
+Vue components import their own stylesheets.
+
+The dialog rules sit in `@layer components` and declare no variables, so
+tokens from `theme`, variables you override in your own CSS, and Tailwind 4
+utilities still win over them even though they load later. If you import
+`styles.css` into a named layer, such as `@import 'c15t/react/styles.css'
+layer(c15t)`, the dialog rules still join the top-level `components` layer.
+List `components` in your layer order statement, for example
+`@layer c15t, components, app;`, so it does not land after your own layers.
+
 The standard stylesheet places rules in `@layer components`. For Tailwind 3,
 use the `styles.tw3.css` entry instead of the standard stylesheet, between the
 components and utilities directives in your Tailwind entry:
@@ -26,6 +69,18 @@ components and utilities directives in your Tailwind entry:
 @tailwind utilities;
 ```
 
+Tailwind 3 also processes the dialog stylesheet the bundler loads, and it
+rejects a stylesheet that uses `@layer components` without its own
+`@tailwind components` directive. Add the c15t plugin before `tailwindcss` in
+your PostCSS config. It removes the layer wrapper from c15t's stylesheets so
+Tailwind 3 accepts them and its preflight does not override them:
+
+```js title="postcss.config.mjs"
+export default {
+  plugins: ['@c15t/ui/postcss-tailwind3', 'tailwindcss', 'autoprefixer'],
+};
+```
+
 Do not load both c15t stylesheet variants. For Tailwind 4 or unlayered CSS,
 inspect layer order before reaching for `!important`.
 
@@ -48,9 +103,17 @@ export const theme = defineTheme({
 });
 ```
 
-Install `@c15t/ui` if importing its theme helper directly. Pass `theme` in your
-provider options. `consentActions` selects styling by action role. A per-action
-entry overrides `primary`, which overrides `default`.
+Install `@c15t/ui` if importing its theme helper directly. The browser does
+not turn tokens into CSS. In React and Next.js, render
+`<ConsentTheme theme={theme} />` where the app renders on the server, and pass
+`theme` in your provider options for `consentActions`. Elsewhere, call
+`generateThemeCSS(theme)` from `@c15t/ui/theme` on the server or at build time
+and put the result in a `<style>` element or your stylesheet. See
+[React styling](https://c15t.com/docs/frameworks/react/styling/overview) and
+[Next.js styling](https://c15t.com/docs/frameworks/next/styling/overview).
+
+`consentActions` selects styling by action role. A per-action entry overrides
+`primary`, which overrides `default`.
 
 ## Target a prompt with CSS
 

package/docs/frameworks/javascript/script-loader.md

@@ -45,3 +45,56 @@ assuming all helpers have the same network behavior.
 The loader exposes `updateScripts`, `getLoadedScriptIds` and `dispose`.
 Unloading an element cannot reverse requests or code that already ran. Test
 revocation and vendor cleanup with [verification](../../guides/verify-consent.md).
+
+## Dispose integration resources
+
+Ordinary scripts keep their mounted resource when `updateScripts` receives a
+fresh object with the same ID and unchanged element configuration. New callback
+functions alone do not reload the vendor or send a temporary denial. Changing
+the source, inline code or element attributes starts a new loading lifecycle.
+Consent conditions are reevaluated on every configuration update. Pending
+load and error events use the latest registered callbacks and consent state.
+Setting `persistAfterConsentRevoked` to `false` removes an owned retained element
+when the script no longer has consent.
+
+Custom script configurations can use `onDispose(info)` to release event
+listeners or other resources. Adding this hook opts the configuration into an
+object-owned lifecycle: replacing the object disposes its resources and starts
+again, even with the same ID. Keep these objects stable across framework
+rerenders. The loader also calls the hook when the configuration is removed or
+the loader is disposed, including configurations that never loaded.
+`info.element` contains the last loaded or retained element when available,
+even when configuration removal has already detached it.
+
+Duplicate references receive one cleanup per registration. Re-registering a
+removed object starts a new lifecycle. Updates requested from lifecycle
+callbacks run after the current pass; if several are requested, the latest
+configuration wins. Disposal stops further reconciliation. A callback feedback
+loop exceeding 100 consecutive passes disposes the loader and reports an
+`error` debug event. Avoid callbacks that keep changing consent or replacing
+their own configuration.
+
+`onBeforeLoad` prepares a loading attempt. If a callback changes consent or
+replaces configurations, the loader cancels that attempt before loading and
+reevaluates the latest state. A still-eligible script can retry preparation
+with a new element and updated consent. Make `onBeforeLoad` safe to repeat;
+use `onLoad` for initialization that requires a completed load. This also
+applies to callback-only scripts, whose `onLoad` is skipped when preparation
+invalidates the current pass.
+
+Consent revocation alone does not call `onDispose`. Use `onConsentChange` for
+vendor opt-out commands. Cleanup errors are reported through the loader's debug
+events and do not prevent other configurations from being cleaned up.
+
+## Clear stored tracking data
+
+Script gating does not remove cookies or Web Storage entries that a script
+already wrote. Configure [clear on revocation](../../integrations/clear-on-revocation.md)
+on your runtime, or attach its module to your existing kernel, to remove
+declared data when its category is denied.
+
+## Shared lifecycle controls
+
+See [shared consent controls](../../guides/shared-consent-controls.md) for external CMPs,
+preference delegation, withdrawal reloads, and application events. These controls
+use the same core runtime across frameworks.

package/docs/frameworks/next/script-loader.md

@@ -108,26 +108,26 @@ do not add a second provider. Keep your site's content and footer inside it.
 
 ## Pass prepared consent through your router
 
-App Router awaits the prefetch in the `ResolvedConsent` Server Component from
-the [App Router guide](https://c15t.com/docs/frameworks/next/app-router) and renders the
-wrapper inside it. This partial example is that component; keep the
-`Suspense` boundary, `html`, `body` and stylesheet from your existing layout:
+In the App Router, the root layout from the
+[App Router guide](https://c15t.com/docs/frameworks/next/app-router) passes the pending
+`resolveConsent` result to this wrapper. This partial example is that call;
+keep the `html`, `body` and stylesheet from your existing layout:
 
 ```tsx
-import type { ReactNode } from 'react';
 import { resolveConsent } from 'c15t/next/server';
 import { consentConfig } from '../c15t.config';
 import { Consent } from '../components/consent';
 
-async function ResolvedConsent({ children }: { children: ReactNode }) {
-  const state = await resolveConsent({ config: consentConfig });
-  return <Consent state={state}>{children}</Consent>;
-}
+// Inside the existing synchronous root layout:
+const state = resolveConsent({ config: consentConfig });
+
+<Consent state={state}>{children}</Consent>
 ```
 
-To stream the page shell before consent resolves instead, pass the unawaited
-promise from a synchronous layout as described in
-[stream the page while consent resolves](https://c15t.com/docs/frameworks/next/app-router#stream-the-page-while-consent-resolves).
+No script loads until the browser has applied the resolved policy and the
+visitor's choice allows it. With the
+[awaited layout](https://c15t.com/docs/frameworks/next/app-router#render-the-banner-in-the-server-html),
+pass the awaited result from `ResolvedConsent` to the same wrapper instead.
 
 Pages Router passes `state={pageProps.consentState ?? {}}` to this wrapper
 in `_app.tsx`. Keep `getServerSideProps` and its `c15t/next/pages` helper.
@@ -166,3 +166,51 @@ with DevTools, or follow [verification](../../guides/verify-consent.md) in your
 Use [custom integrations](../../integrations/building-integrations.md) for an
 unlisted vendor. Google helpers have a separate
 [Consent Mode contract](../../integrations/google-tag-manager.md).
+
+## Granular consent
+
+A visitor can grant marketing and still turn one vendor off. Declare the
+vendors next to the scripts in `lib/scripts.ts`, with the `vendor` slug each
+script already carries, and pass both to `ConsentRoot`:
+
+```ts title="lib/scripts.ts"
+import type { Vendor } from 'c15t';
+
+export const vendors: Vendor[] = [
+  {
+    id: 'x-pixel',
+    name: 'X Pixel',
+    category: 'marketing',
+    privacyPolicyUrl: 'https://x.com/privacy',
+  },
+];
+```
+
+```tsx title="components/consent.tsx"
+import { scripts, vendors } from '../lib/scripts';
+
+<ConsentRoot state={state} config={consentConfig} scripts={scripts} vendors={vendors}>
+  {children}
+</ConsentRoot>
+```
+
+The preference center lists each vendor under its category with a switch.
+Integrations from `@c15t/scripts` set `vendor` to their manifest slug, so
+`xPixel()` needs no extra wiring; give a hand-written script the same slug
+in its `vendor` field. A backend manifest can declare vendors too. See
+[granular consent](../../integrations/granular-consent.md) for storage,
+bulk actions and the hooks a custom control uses.
+
+## Clear stored tracking data
+
+Script gating does not remove cookies or Web Storage entries that a script
+already wrote. Add `clearOnRevocation` to your `ConsentRoot` or provider
+options to remove declared data when its category is denied. See
+[clear on revocation](../../integrations/clear-on-revocation.md) for configuration
+and browser limits.
+
+## Shared lifecycle controls
+
+See [shared consent controls](../../guides/shared-consent-controls.md) for external CMPs,
+preference delegation, withdrawal reloads, and application events. These controls
+use the same core runtime across frameworks.

package/docs/frameworks/react/script-loader.md

@@ -53,3 +53,17 @@ Use [custom integrations](../../integrations/building-integrations.md) for an
 unlisted vendor and [verification](../../guides/verify-consent.md) for the network
 checks. Google helpers have a separate
 [Consent Mode contract](../../integrations/google-tag-manager.md).
+
+## Clear stored tracking data
+
+Script gating does not remove cookies or Web Storage entries that a script
+already wrote. Add `clearOnRevocation` to `ConsentProvider.options` to remove
+declared data when its category is denied. See
+[clear on revocation](../../integrations/clear-on-revocation.md) for configuration
+and browser limits.
+
+## Shared lifecycle controls
+
+See [shared consent controls](../../guides/shared-consent-controls.md) for external CMPs,
+preference delegation, withdrawal reloads, and application events. These controls
+use the same core runtime across frameworks.